要素で:: 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

擬似要素にfont-size: 36px;を与えます。

#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は、あなたが簡単にvisibilityプロパティでこれを行うことができます

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