如何在元素中只显示:: 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;伪元素

#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>