Ufdjrw

I have a breadcrumb that lists the page's hierarchy path. I hid the first anchor tag & changed the anchor tag ::before pseudo-class to an SVG of a small house like so:

li:first-child a 
 display: none;
 

li:first-child::before 
 color: transparent;
 content: '';
 display: block;
 width: rem(16px);
 height: rem(16px);
 position: relative;
 top: rem(2px);
 margin: 0;
 background-image: url("../images/breadcrumb-image.svg");
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 &:hover 
 color: transparent;
 
 

I got the desire effect but the SVG is not clickable to return to the home page. Any solutions for this? I don't mind whether CSS or JS.

This is the image so it gives you an idea:

Thanks in advance!

I have found a way to make the SVG on a ::before pseudo-class clickable through jQuery like so:

SCSS Code:

This is the styling to hide the anchor tag & add an SVG to the anchor tag before pseudo-class.

li:first-child a 
 display: none;
 
li:first-child::before 
 color: transparent;
 content: '';
 cursor: pointer;
 display: block;
 width: rem(16px);
 height: rem(16px);
 position: relative;
 top: rem(2px);
 margin: 0;
 background-image: url("../images/breadcrumb-image.svg");
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 &:hover 
 color: transparent;
 cursor: pointer;
 
 

JavaScript Code:

 //Store the href attribute(the link was already pointing to the home page) of the anchor tag in a variable
 var breadcrumbHomeLink = $('.breadcrumb__list--item:first-child a').attr('href');

 //Store the SVG with ::before pseudo-class in variable
 var breadcrumbSVG = $('.breadcrumb__list--item:first-child').before();

 //Make Breadcrumb SVG clickable & redirect to home page
 breadcrumbSVG.on('click', function()
 location.href = breadcrumbHomeLink;
 );