CSS——透明度应用于主要元素而不是伪元素(::after, ::before)

Question

我有一个带有span标签的伪元素::after:

#someId {
font-family: Arial;
font-size: 36px;
color: red;
}
#someId::after {
content: 'B';
}

<span id="someId">A</span>

我想让::after元素可见，同时隐藏主要元素。我尝试使用opacity和filter: opacity和visibility，但都没有成功。我该如何实现所需的行为而不操作color属性，并保持文本可选？
感谢您的帮助。

- Kacper G.

---

做不到。你可以尝试使用绝对定位或缩放的方法进行黑客攻击，但是像你想要的透明度技巧是行不通的。 - dgo

@lumio 是的，但是我不想操纵 color 属性。 - Kacper G.

基本上，你不能同时保持跨度文本可选择。 - Paulie_D

伪元素 ::after 和 ::before 不是 DOM 的一部分，因此有很多属性和方法无法“看到”它们。 - zer00ne

Answer 1

在元素上无法使用不透明度为0，但可以在伪元素上使用不透明度为1。

但你可以在元素和伪元素中使用不同的可见性数值。

.lorem {
  visibility: hidden;
}
.lorem::before {
  visibility: visible;
  content: 'Lorem';
}

<p class="lorem">ipsum</p>

- Mr.DeleteMyMessages

---

为什么不能在元素上使用不透明度0，而在伪元素上使用不透明度1？ - carloswm85