如何在 ::before pseudo-class 中使 SVG 可点击？

Question

我有一个面包屑，其中列出了页面的层次结构路径。我隐藏了第一个锚标记并将锚标记 ::before pseudo-class 更改为小房子的 SVG，如下所示：

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;
    }
  }

我得到了想要的效果，但是 SVG 无法点击 return 到主页。有什么解决办法吗？我不介意 CSS 或 JS.

这张图片可以让您了解一下：

提前致谢！

Answer 1

我找到了一种方法，使 ::before 伪 class 上的 SVG 可通过 jQuery 单击，如下所示：

SCSS代码：

这是隐藏锚标记并在伪 class 之前向锚标记添加 SVG 的样式。

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代码：

  //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;
  });

如何在 ::before pseudo-class 中使 SVG 可点击？

How to make SVG in ::before pseudo-class clickable?

svg

breadcrumbs

pseudo-class