Swap text using ::before - CSS

Question

Good afternoon friends.

I’m trying to swap a text from a page that I only have access to CSS.

I just want to trade a term.

I tried it with :before and font-size:0; (in the parent class of ::before), but then everything became invisible, including the content text of before.

Follow a little snide.

label.service::after {
  content: " de Transfer"
}

Answer 1

Gabriel is going wrong because pseudo-element ::after is inheriting the font-size from the father who is 0, so you have to put a font-size pro ::after or else it will be 0 like the father his.

See how it feels when you fix it by putting the font-size in the son. The text of the father disappears, but the text of the son remains.

OBS: Notice I put a color text on the father, and the text of the son (::after) remains the same, so he inherits some attributes from his father, as was the case of font-size

.service {
	font-size: 0;
    color:red; /* cor de texto que o filho ::after vai herdar */
}
.service::after {
  content: " de Transfer";
  font-size: 16px !important;
}

<label for="" class="service">
  texto que some
</label>

---

Keep in mind that: the user may not even see the text we hide with font-size: 0, but the Google Bot will definitely read this content... It will solve so that you see with your eyes, but for the crawlers and screen readers the text will remain accessible...