Why cannot I use html entities in anonymous replaced elements?

Question

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: '&lt;';
  color: green;
}

.invalid:after {
  content: '&gt;';
  color: red;
}

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

Denys Séguret · Accepted Answer · 2013-01-03 15:15:16Z

4

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.

edited Jan 3, 2013 at 15:15

answered Jan 3, 2013 at 15:07

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sinsedrix Over a year ago

< and > where just examples, in fact I want a check/cross whose entities are ✓ and ✗ then it seems to work with \2713 nor \2717 thank you !

Collectives™ on Stack Overflow

Why cannot I use html entities in anonymous replaced elements?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related