CODEWITHSUNDEEP
htmlcss
Kacper G.
Kacper G.

Reputation: 692

How to make only the ::after pseudo element visible in an element?

I have got an element with ::after pseudo element and some text:

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

I want only the letter b to be visible. I tried to change display andposition, but it do not work. How can I do that without manipulate color property?

Upvotes: 3

Views: 2120

Answers (2)

TylerH
TylerH

Reputation: 21075

You can easily do this with the visibility property.

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

Upvotes: 3

jafarbtech
jafarbtech

Reputation: 7025

Use font-size:0 to hide the actual element give the font-size: 36px; to the pseudo element

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

Upvotes: 1

Related Questions