css - 在 CSS 中仅使链接的::before 部分可点击

Question

我网页中的标题也是一个锚定到自身的链接，出于可访问性原因，我无法真正更改它。

但是，大多数人都喜欢类似 🔗 Title 的东西，只有 🔗 是可点击的链接。

所以我的 html 看起来像

<h2 id="myid"><a href="#myid">Title</a></h2>

还有我的 CSS(到目前为止):

h2 a::before { content: "🔗 "; }

但是，我远没有知道下一步该做什么的魔法，我试着查看 this question但我真的不知道如何“保存” ::before 部分不受影响。

Answer 1

这有点棘手，但您可以为 🔗 字符设置一个固定宽度，并在元素的整个长度上重叠 h2::after 伪元素 减去 宽度a::before 伪元素，因此无法单击文本。

值得注意的是，这会降低页面的可用性，因此请谨慎使用此方法

h2 {
  position: relative;
  display: inline-block;
}

h2::after {
  position: absolute;
  z-index: 1;
  content: "";
  right: 0;
  height: 100%;
  width: calc(100% - 1.25em);
}

h2 a::before {
  content: "🔗";
  display: inline-block;
  border-bottom: 1px dashed yellowgreen;
  width: 1.25em;
}

h2 a {
  text-decoration: none;
  color: inherit;
}

<h2 id="myid"><a href="#myid">Title</a></h2>