CODEWITHSUNDEEP
csshtml-entities
sinsedrix
sinsedrix

Reputation: 4775

Why cannot I use html entities in anonymous replaced elements?

Anonymous replaced elements are content used with :before or :after

See https://developer.mozilla.org/en-US/docs/CSS/content

Here is an example:

.valid:after {
  content: '<';
  color: green;
}

.invalid:after {
  content: '>';
  color: red;
}

The problem is HTML entities are not replaced by their caracters and I still see their code.

Upvotes: 1

Views: 166

Answers (1)

Denys Séguret
Denys Séguret

Reputation: 382150

CSS isn't HTML. Simply use

.valid:after {
  content: '<';
  color: green;
}

In case of need, you may also escape your characters using the unicode hexa.

For example for ▶ :

.valid:after {
  content: '\25B6';
  color: green;
}

But you don't need to escape < nor >, even if you embed your CSS in the <style> element of an HTML file.

Just in case (it might be less disturbing to your HTML editor), their codes would be \003C and \003E.

Upvotes: 4

Related Questions