Adding HTML entities using CSS content

Clean writing and legibility

In the universe of CSS, clarity and accuracy are the stars that guide us. You must include a space after a CSS escape sequence to prevent a collision of characters:

.element::before {
  /* No character left behind */
  content: "\00a0\0020";
}


The \0020 indicates the space character, ensuring the following text doesn't merge with the preceding non-breaking space.

HTML entities to Unicode

Say goodbye to HTML entities in CSS. Welcome Unicode with open arms. For instance, convert » (») to Unicode \00bb:

.element::before {
  /* Transformations, roll out! */
  content: "\00bb";
}


A programmer's calculator or a Unicode table can come to your rescue to find the correct code for any symbol.

Dodging potential booby traps

Attempt using HTML entities in your CSS content sparingly:

/* A mission gone south */
.element::before {
  content: " ";
}


The above code actually spells out   rather than placing a space. Stick to Unicode escapes in CSS to keep the display accurate.

Navigating various entities

Injecting symbols

Every HTML entity has a Unicode alter ego; for instance, ⋄ (♦) transforms into \2666. Here's how the magic works:

.element::after {
  /* Diamonds are a girl's best friend */
  content: "\2666";
}


Let's do the math

Mathematical symbols are no exception; × (×) is \00d7 in its Unicode form:

.element::before {
  /* Mind the multiplication */
  content: "\00d7";
}


Music to the ears

To add a musical note, &eighthnote; (♪), you can use \266a:

.element::after {
  /* Let the music play */
  content: "\266a";
}


Discovering more gems

Spacious arrangements

For symmetrical beauty, you may need a broader space. Sound the trumpets for \2002 or en-space:

.element::after {
  /* Venti, grande, or en-space? */
  content: "\2002";
}


Curious characters

Need a guiding indicator? Say hello to → (→) or \2192:

.element::before {
  /* This way, please... */
  content: "\2192";
}


Unicode escape mastery

To incorporate expressive characters, ensure Unicode is impeccably escaped; &heart; (♥) should be \2665:

.element::after {
  /* Sharing the love */
  content: "\2665";
}


Pro tip: Variables' game

For reuse, consider storing symbols as CSS variables:

:root {
  /* Stars in a jar */
  --star: "\2605";
}

.element::before {
  content: var(--star);
}


Overcoming common challenges

Unexpected results

If you see an unfamiliar symbol, re-check your Unicode notation and syntax.

Encoding matters

Ensure your CSS file is saved with UTF-8 encoding to prevent alien invasions, I mean, Unicode issues.

Checking compatibility

With a galaxy of browsers out there, always use Can I use... to check if a specific entity is browser-friendly.