伪元素中的 CSS 指针事件在 Firefox 中不起作用答案

【问题标题】：CSS pointer-events in pseudo element not working in Firefox伪元素中的 CSS 指针事件在 Firefox 中不起作用
【发布时间】：2016-07-23 21:59:01
【问题描述】：

我有一个水平菜单，中间点（通过::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>

【问题讨论】：

确实，Safari 能正确解释这段代码，而 Firefox 不能。
而不是a标签添加:after for li jsfiddle.net/victor_007/54gmfxax/1
::after 在元素内插入内容，而不是在元素之后。

标签： html css css-selectors cross-browser pseudo-element

【解决方案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>

【讨论】：