css - 为什么我可以选择定位伪元素下的文本？

Question

我有一个元素，我在该元素上使用伪元素 (::after) 来设置叠加层的样式。由于技术原因，我不能/不想使用其他元素(例如 div)来添加叠加层。伪元素绝对定位并出现在实际元素的前面。我惊讶地发现 div 中的文本仍然可以“通过”伪元素进行选择。我玩过 z-index 和 pointer-events，但没有成功。看这个fiddle举个(外部)例子。

为什么会这样？为什么用鼠标仍然可以选中文本？除了user-select还有其他解决方案吗？ ？

div {
  position: relative;
}

div::after {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.4;
  background-color: black;
}

<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sollicitudin dui nec neque rutrum, eu auctor nulla accumsan. Quisque non eleifend nibh. Fusce aliquet imperdiet odio vitae pretium. Nam tincidunt mattis ante, nec consectetur diam maximus
    vel. Fusce at lectus porttitor, feugiat purus sed, porta felis. Morbi tempus ante a orci finibus rhoncus. Nullam a porta enim. Sed id eros convallis, consectetur turpis a, gravida nunc. Nullam sed dui interdum diam placerat suscipit sit amet nec mi.
    Maecenas ultricies metus massa, id vestibulum nisi posuere facilisis. Aliquam erat volutpat. Quisque blandit condimentum augue. Nullam pulvinar turpis libero, id luctus dolor ultricies quis.</p>
</div>

Answer 1

关于你的问题:

Why is this happening?

这似乎是因为生成的内容本身是不可选择的。见How can I make generated content selectable? )

尝试选择以下片段中的文本:

div:before {
 content: 'generated content - before... ';
}
div:after {
 content: '...generated content - after';
}

<div>Only content of div is selectable</div>

很明显，选择就是只选择出现在 DOM 中并根据 CSS 2.1 spec 的元素。 :

Neither pseudo-elements nor pseudo-classes appear in the document source or document tree.

所以当在覆盖层上选择时 - 覆盖层被忽略，而是选择了 div 中的文本

---

也就是说，the spec here似乎是说生成的内容应该是可选的

Generated content should be searchable, selectable, and available to assistive technologies

...但据我所知，该规范的一部分尚未在任何浏览器中实现。