如何在元素中只显示:: 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属性，我怎么能这样做？

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>

Answer 2

使用font-size:0隐藏实际元素，将font-size: 36px;赋予伪元素

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;