在CSS中仅使链接的:: before部分可单击

我网页上的标题也是一个链接到自己的链接,由于可访问性原因,我无法真正更改。

但是,大多数人都喜欢? Title形式的内容,只有the是可点击的链接。

所以我的html看起来像

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

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

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

但是,我远没有让巫师知道下一步该怎么做,而是尝试查看this question,但我真的不知道如何“保存” ::before部分不受影响

uwycny 回答:在CSS中仅使链接的:: before部分可单击

这有点棘手,但是您可以为?字符设置一个固定的宽度,并在元素{em>减去的整个长度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>

本文链接:https://www.f2er.com/3136539.html

大家都在问