CODEWITHSUNDEEP
htmlcsspseudo-element
Kacper G.
Kacper G.

Reputation: 692

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

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.

Upvotes: 7

Views: 10897

Answers (1)

Mr.DeleteMyMessages
Mr.DeleteMyMessages

Reputation: 381

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>

Upvotes: 8

Related Questions