防止悬停在伪元素上 - 但指针事件：无；不这样做

Question

我在一行中有几个链接，我想在它们之间用破折号分隔。我选择使用::before 伪元素来实现这一点，并且效果很好。

但是，将鼠标悬停在分隔线上也会触发悬停在我打开了::before 的元素上。

This is a fiddle showing the issue. 如果将鼠标悬停在破折号上，下划线会出现在a 下方。

在搜索如何防止这种情况发生时，我遇到了this stackoverflow question。连同指针事件属性上的documentation on developer.mozilla.org 和caniusethis page，我确信这会解决它。但它没有。

我在这里错过了什么？

Answer 1

您需要在css中进行更改

.wrap a::before {
    content: '----';
    padding: 0 15px;
    position: absolute;
    left: -50px;
    pointer-events: none;
}
.wrap a {
   text-decoration: none;
   position: relative;
   margin-left: 50px;
   display: inline-block;
}

Answer 2

您需要将position:absolute 用于---- 以使其脱离<a> 流，还需要将position:relative 用于父<a> 元素。

堆栈片段

.wrap a {
  text-decoration: none;
  margin: 0 30px;
  position: relative;
}

.wrap p {
  margin: 0;
}

.wrap {
  font-family: sans-serif;
  border: 1px solid green;
  padding: 5px;
  margin-bottom: 20px;
}

.wrap a:nth-of-type(1) {
  margin-left: 50px;
}

.wrap a::before {
  content: '----';
  position: absolute;
  pointer-events: none;
  left: -30px;
  transform: translateX(-50%);
}

.wrap a:hover {
  text-decoration: underline;
}

<div class="wrap">
  <p>These links do not have the pointer-events: none; property</p>
  <br>
  <a href="#">link text one</a>
  <a href="#">link text two</a>
  <a href="#">link text three</a>
</div>

<div class="wrap">
  <p>These do have pointer-events: none; yet their behaviour is the same as with the block above.</p>
  <br>
  <a href="#" class="pointerevents">link text one</a>
  <a href="#" class="pointerevents">link text two</a>
  <a href="#" class="pointerevents">link text three</a>
</div>