CSS li：before语句取消激活列表项中的html链接[duplicate]

kcugc4gi 于 2023-02-26 发布在其他

关注(0)|答案(3)|浏览(143)

- 此问题在此处已有答案**：

::after and ::before pseudo classes blocking anchor tags（2个答案）
昨天关门了。
我的脚本的标题如下所示：

.tickList {
  margin: -0.5em 0.5em;
  list-style: none;
  list-style-position: outside;
}

.tickList li {
  padding-left: 25px;
  margin-bottom: -1.5em;
  margin-top: -1.5em;
  margin-left: -3.5em;
  text-align: left;
  position: relative;
  top: -20px;
}

.tickList li:before {
  display: block;
  content: "\27A5";
  font-size: x-large;
  color: #41845B;
  position: relative;
  left: -1.1em;
  top: 25px;
}

<ul class="tickList">
  <li>Some text <a href="somelink">link text</a>. More text.</li>
</ul>

现在，如果我在浏览器中查看我的页面，链接文本带有下划线，看起来像一个链接，但是，如果我将鼠标移到它上面，光标不会改变，单击它也没有任何效果。我做了一些测试，结果表明，如果我从样式声明中删除.ticklist li:before部分（或者实际上只是display:block部分），那么链接就会按预期工作。为什么这段CSS代码会破坏链接功能呢？
请注意，我没有包含任何外部js包，如jQuery或其他任何包。

css

来源：https://stackoverflow.com/questions/75548542/css-libefore-statement-deactivates-html-links-in-list-item

3条答案

按热度按时间

qij5mzcb1#

:before元素的宽度实际上是页面的100%，尝试定义一个固定的宽度，你会发现覆盖层不再显示。

.tickList li:before {
  display: block;
  content: "\27A5";
  font-size: x-large;
  color: #41845B;
  position: relative;
  left: -1.1em;
  top: 25px;
  width: 50px;
}

类似的东西

赞(0）回复(0）举报 2023-02-26

ijxebb2r2#

有很多方法可以解决这个问题，即插入的before元素位于列表项的顶部。尝试将pointer-events: none;添加到您的before规则中。这将防止before元素成为任何指针事件的目标，实际上是将其传递到列表项：

.tickList {
  margin: -0.5em 0.5em;
  list-style: none;
  list-style-position: outside;
}

.tickList li {
  padding-left: 25px;
  margin-bottom: -1.5em;
  margin-top: -1.5em;
  margin-left: -3.5em;
  text-align: left;
  position: relative;
  top: -20px;
}

.tickList li:before {
  display: block;
  content: "\27A5";
  font-size: x-large;
  color: #41845B;
  position: relative;
  left: -1.1em;
  top: 25px;
  pointer-events: none;
}

<ul class="tickList">
  <li>Some text <a href="somelink">link text</a>. More text.</li>
</ul>

或者，您也可以将before元素的z-index设置为-1，这样可以有效地将其移到页面后面。

赞(0）回复(0）举报 2023-02-26

zazmityj3#

同样的结果也可以用更少的努力来实现：

.tickList {
  list-style: none;
  list-style-position: outside;
  padding: 0;
  margin: 0;
}

.tickList li {
  padding-left: 1em;
  text-align: left;
}

.tickList li:before {
  content: "\27A5";
  font-size: x-large;
  color: #41845B;
  position: relative;
  top: .15em;
  padding-right: .2em;
}

<ul class="tickList">
  <li>Some text <a href="somelink">link text</a>. More text.</li>
</ul>

赞(0）回复(0）举报 2023-02-26

我来回答

CSS li：before语句取消激活列表项中的html链接[duplicate]

3条答案

相关问题

热门标签

最新问答