CSS - Opacity to main element not to pseudo-elements (::after, ::before)

Question

I have got span with ::after pseudo-element:

 #someId { font-family: Arial; font-size: 36px; color: red; } #someId::after { content: 'B'; } 

 <span id="someId">A</span> 

I want to make the ::after element visible, while hiding the main element. I tried to use opacity and filter: opacity and visibility , but that didn't work. How can I achieve the desired behaviour without manipulating the color property, while keeping the text selectable ?
Thanks for your help.

Answer 1

You can't use opacity 0 on element, but opacity 1 on pseudo element.

But you can use diffrent visibility values in elements and pseudo elements.

 .lorem { visibility: hidden; } .lorem::before { visibility: visible; content: 'Lorem'; } 

 <p class="lorem">ipsum</p>