Exchanging text using the :: before - CSS function

Question

Exchanging text using the :: before - CSS function

Navigation

#1 by (0 votes)

0

Good afternoon, friends.

I'm trying to change text from a page that I only have access to CSS.

I just want to change a term.

I've tried with :: before and font-size: 0; (in the parent class of :: before), but there everything was invisible, including the text content do before.

Follow a little bit of gambiarra.

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

html css

asked by anonymous 30.08.2018 / 21:35

1 answer

End of overflow away from table Create table validation many to many in Laravel

score 0 · Accepted Answer

Gabriel is doing wrong because the pseudo-element ::after is inheriting the font-size of the parent that is 0, so you have to put a font-size pro ::after or else he will be 0 as the parent of it.

See how it gets when you fix this by putting font-size on child . The father's text disappears, but the child's text remains.

OBS: Notice that I put a color of text in the parent, and the text of the child ( ::after ) stays the same, so it inherits some attributes from the parent, 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 that we hide with font-size: 0 , but Google Bot is sure to read this content ... It will solve what you see with the eyes, but for the crawlers and screen readers the text will remain accessible ...