CSS伪元素中的pointer-events在Firefox中无法工作

Question

我有一个带有中间点的水平菜单（通过::after伪元素插入），用于分隔菜单项。我想要禁用中间点上的链接。

在Safari中，这可以按预期工作，但是在Firefox（v.47）中，pointer-events: none被忽略了。

有人知道解决方法吗？

我的代码（以及Fiddle：https://jsfiddle.net/54gmfxax/）：

a {
  text-decoration: none;
}
ul li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  white-space: nowrap;
  display: inline;
  float: left;
}
ul li a::after {
  padding: 0em 1em;
  content: '\00b7';
  pointer-events: none;
}
ul li.last a::after {
  content: none;
}

<ul class="menu">
  <li class="first"><a href="#1" title="">Item 1</a>
  </li>
  <li class="leaf"><a href="#2" title="">Item 2</a>
  </li>
  <li class="leaf"><a href="#3" title="">Item 3</a>
  </li>
  <li class="last leaf"><a href="#4" title="">Item 4</a>
  </li>
</ul>

- Madamadam

---

确实，Safari 正确解释了这段代码，而 Firefox 没有。 - nicael

在 li 中添加 :after，而不是使用 a 标签。 https://jsfiddle.net/victor_007/54gmfxax/1/ - Vitorino fernandes

::after 插入的内容在元素内部，而不是在其后面。 - Oriol

Answer 1

不要将::after伪元素放在锚点元素上：

ul li a::after {
  padding: 0em 1em;
  content: '\00b7';
  pointer-events: none;
}
ul li.last a::after {
  content: none;
}

将它们放在列表项中：

ul li::after {
  padding: 0em 1em;
  content: '\00b7';
  /* pointer-events: none; (not necessary) */
}
ul li.last::after {
  content: none;
}

a {
  text-decoration: none;
}
ul li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  white-space: nowrap;
  display: inline;
  float: left;
}
ul li::after {
  padding: 0em 1em;
  content: '\00b7';
  pointer-events: none;
}
ul li.last::after {
  content: none;
}

<ul class="menu">
  <li class="first"><a href="#1" title="">Item 1</a>
  </li>
  <li class="leaf"><a href="#2" title="">Item 2</a>
  </li>
  <li class="leaf"><a href="#3" title="">Item 3</a>
  </li>
  <li class="last leaf"><a href="#4" title="">Item 4</a>
  </li>
</ul>

- Michael Benjamin