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