如何使元素中只有 ::after 伪元素可见？

Question

我有一个带有::after伪元素和一些文本的元素：

#someElement {
  font-family: Arial;
  font-size: 36px;
}

#someElement::after {
  content: 'b';
  position: absolute;
  left: 0.5rem;
  color: red;
}

<div>
  <span id="someElement">a</span>
</div>

我只想让字母b可见。我尝试改变display和position，但不起作用。我如何在不操纵color属性的情况下实现这一目标？

- Kacper G.

Answer 1

你可以用 visibility 属性轻松实现此操作。

#someElement {
  font-family: Arial;
  font-size: 36px;
  visibility: hidden;
}

#someElement::after {
  content: 'b';
  position: absolute;
  left: 0.5rem;
  color: red;
  visibility: visible;
}

<div>
  <span id="someElement">a</span>
</div>

- TylerH

Answer 2

使用font-size:0来隐藏实际元素，给伪元素赋值font-size: 36px;。

#someElement {
  font-family: Arial;
  font-size:0;
}

#someElement::after {
  content: 'b';
  position: absolute;
  left: 0.5rem;
  color: red;
  font-size: 36px;
}

<div>
  <span id="someElement">a</span>
</div>

- jafarbtech