Using CSS content with HTML Entities in CSS

By the end of this page, you will understand that CSS content does not parse HTML entities like  . Instead, it inserts plain text or Unicode characters. You will learn the correct syntax for adding characters in CSS, including non-breaking spaces, arrows, quotes, and separators with pseudo-elements such as ::before and ::after.

The key idea is that HTML entities belong to HTML, not CSS.

When you write an entity like   in HTML, the browser's HTML parser converts it into the corresponding character. But CSS is not parsed as HTML, so content: ' ' is treated as a normal string containing six characters: &, n, b, s, p, and ;.

The CSS content property works differently:

• It can insert plain text strings
• It can insert Unicode characters using escape sequences
• It is usually used with pseudo-elements like ::before and ::after

So if you want a non-breaking space in CSS, you should use the Unicode value for that character:

content: "\00A0";

Why this matters:

• Developers often use content for icons, separators, labels, and decorative characters
• Knowing that CSS uses Unicode escapes helps you avoid confusion with HTML entities

Think of HTML and CSS as two different languages speaking to the browser.

• HTML says: "Here is the page structure and text."
• CSS says: "Here is how it should look."

An HTML entity like   is a special instruction that only the HTML reader understands.

If you hand that same instruction to CSS, CSS does not translate it. It just treats it as ordinary text.

A useful analogy:

• HTML entities are like words in one language
• Unicode escapes in CSS are like the numeric code for the same symbol

So instead of asking CSS to understand the HTML word  , you give it the actual character code \00A0.

The content property is most often used with ::before and ::after.

Basic syntax

selector::before {
  content: "text";
}

Insert a non-breaking space

.breadcrumbs a::before {
  content: "\00A0";
}

This inserts a Unicode non-breaking space before each breadcrumb link.

Insert a separator arrow

.breadcrumbs a::before {
  content: ">";
}

If you just need a normal visible character, you can write it directly.

Insert a bullet using Unicode

.list-item::before {
  content: "\2022";
  margin-right: 0.5rem;
}

Consider this CSS:

.breadcrumbs a::before {
  content: "\00A0";
}

And this HTML:

<nav class="breadcrumbs">
  <a href="/home">Home</a>
</nav>

What happens step by step

1. The browser reads the HTML and finds an <a> element inside .breadcrumbs.
2. The CSS selector .breadcrumbs a::before matches that link.
3. The browser creates a pseudo-element before the link's content.
4. It reads content: "\00A0";.
5. CSS interprets \00A0 as the Unicode character non-breaking space.
6. That character is inserted before the word Home.

What happens with the broken version

The CSS content property is commonly used for small UI details.

Breadcrumb separators

.breadcrumbs a + a::before {
  content: "/";
  margin: 0 0.5rem;
}

Adds a separator before every breadcrumb except the first.

Required field markers

label.required::after {
  content: " *";
  color: red;
}

Displays a red asterisk after required labels.

External link indicators

a.external::after {
  content: " \2197";
}

Adds an arrow to show a link opens externally.

Decorative bullets or icons

.feature::before {
  : ;
  : green;
  : ;
}

In real codebases, developers usually use content in a few predictable patterns.

1. Decorative UI markers

Common for separators, arrows, bullets, and badges.

.nav-item + .nav-item::before {
  content: "|";
  margin: 0 0.5rem;
}

2. Guarding against extra markup

Instead of adding extra <span> elements just for decoration, developers use pseudo-elements.

.button-download::before {
  content: "\2B73";
  margin-right: 0.5rem;
}

This keeps HTML cleaner.

3. Using spacing properties instead of space characters

In production code, layout spacing is often done with:

• margin
• padding
• gap
• flexbox or grid

Example:

Mistake 1: Using HTML entities in CSS

Broken code:

.notice::before {
  content: "©";
}

This prints © literally.

Correct:

.notice::before {
  content: "\00A9";
}

Mistake 2: Forgetting quotes

Broken code:

.notice::before {
  content: \00A9;
}

Correct:

.notice::before {
  content: "\00A9";
}

The content value for text should be in quotes.

Mistake 3: Using :before vs ::before

Older CSS often uses , which still works in many cases, but modern CSS prefers .

  vs \00A0

Quick rules

• CSS content does not understand HTML entities
• Use ::before or ::after with content
• Use quoted strings for text
• Use Unicode escapes for special characters
• Use margin, padding, or gap for layout spacing instead of inserting many spaces

Common examples

.element::before {
  content: "Hello";
}

.element::before {
  content: "\00A0"; /* non-breaking space */
}

.element::before {
  content: "\2022"; /* bullet */
}

 {
  : ; 
}

Why does   print as text in CSS?

Because CSS does not parse HTML entities. It treats   as an ordinary string.

How do I add a non-breaking space in CSS?

Use the Unicode escape:

content: "\00A0";

Can I use HTML entities like © in CSS content?

No. Use the Unicode equivalent instead, such as "\00A9" for ©.

Should I use :before or ::before?

Use ::before in modern CSS. :before is older syntax that still appears in legacy code.

Is content only for pseudo-elements?

In normal beginner usage, yes. It is mainly used with ::before and ::after.

Is it a good idea to use content for spacing?

• CSS pseudo-elements — ::before and ::after are the main features used with content.
• Unicode characters — CSS uses Unicode escape sequences for special symbols.
• HTML entities — Useful to compare with CSS escapes because they look similar but work in different contexts.
• CSS selectors — Needed to target the right elements when inserting content.
• Margin, padding, and gap — Often better tools than inserted spaces for visual layout.
• Accessibility in CSS — Important when deciding whether generated content is decorative or meaningful.