html - 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 属性的情况下实现所需的行为，同时保持文本可选择？
感谢您的帮助。

Answer 1

您不能在元素上使用不透明度 0，但可以在伪元素上使用不透明度 1。

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

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

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