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

Question

我有一个元素,我使用伪元素(::after)来设置叠加层的样式.由于技术原因,我不能/不想使用其他元素(例如div)添加叠加层.伪元素绝对定位并出现在实际元素的前面.我惊讶地发现里面的文字div仍然可以选择,"通过"伪元素.我周围玩z-index,并pointer-events没有成功.对于(外部)示例,请参阅此小提琴.

为什么会这样？为什么仍然可以用鼠标选择文本？除此之外还有其他解决方案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

如果您不想使用user-select: none替代方案，可以将::selection.

p::selection {
  background-color: transparent;
}

这不仅隐藏了选择，而且还使其无法突出显示。它与大多数浏览器兼容，除了移动浏览器和 Firefox（你必须使用::-moz-selection）。

p::selection {
  background-color: transparent;
}

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

p::selection {
  background-color: transparent;
}

p::-moz-selection {
  background-color: transparent;
}