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

user_8493705 0
Viewed 1454

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?

css html
2 Answers

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>

user_27564090

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>

user_60826450
Related