CSS的li:before语句导致列表项内HTML链接失效的原因

我的脚本包含如下CSS与HTML代码：

.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代码为何会破坏链接功能？注：我未引入jQuery等外部JS包。

核心原因 #

.tickList li:before设置了display:block，再加上相对定位的top:25px和left:-1.1em，这个伪元素的块级区域实际覆盖在了链接的上方。虽然视觉上看不到它挡住链接，但浏览器的点击事件会优先被这个伪元素捕获，导致底下的链接接收不到鼠标点击和悬停事件，自然就失效了。

而移除display:block后，伪元素默认是display:inline，只会占据自身内容的小范围，不会覆盖整个链接区域，所以链接就能正常响应事件了。

解决办法 #

有几种简单的修复方式：

• 方法一：让伪元素不接收鼠标事件
  在.tickList li:before里加上pointer-events: none;，这样鼠标事件会直接穿透伪元素，作用到下面的链接上：

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

• 方法二：调整定位方式避免覆盖
  把伪元素的position:relative改成position:absolute，利用父元素li已有的position:relative做定位参考，这样伪元素的定位不会影响正常内容布局，也不会覆盖链接：

  .tickList li:before {
    display: block;
    content: "\27A5";
    font-size: x-large;
    color: #41845B;
    position: absolute; /* 修改这里 */
    left: -1.1em;
    top: 25px;
  }
  

• 方法三：修改伪元素的显示类型
  把display:block改成display:inline-block，再微调位置，让伪元素只占据自身图标区域，不会覆盖链接：

  .tickList li:before {
    display: inline-block; /* 修改这里 */
    content: "\27A5";
    font-size: x-large;
    color: #41845B;
    position: relative;
    left: -1.1em;
    top: 0.2em; /* 调整top值适配行内块 */
    margin-right: 0.3em;
  }
  

内容的提问来源于stack exchange，提问作者user10425889