How do you use the CSS content property to add HTML entities?

You typically do not use the same HTML entity syntax (e.g., ©) inside CSS. Instead, you either:

1. Directly place the special character (e.g., ©) if your CSS file is UTF-8.
2. Use Unicode escape sequences (e.g., \00A9) in the content property.

For example:

.icon::before {
  /* Using a direct character (works if CSS is saved as UTF-8) */
  content: "©";

  /* OR using a Unicode escape sequence for © */
  /* content: "\00A9"; */
}

1. Direct Character vs. Unicode Escape

A) Direct Character in UTF-8

If your CSS file is properly encoded in UTF-8, you can paste the desired symbol directly:

span::after {
  content: "♥"; /* Heart symbol if file is UTF-8 */
}

• Pros: Easy to read and maintain if your editor supports UTF-8.
• Cons: If your file encoding is incorrect or if someone copies/pastes incorrectly, you might get garbled characters.

B) Unicode Escape Sequences

span::after {
  content: "\2665"; /* Unicode code point for heart (♥) */
}

• Pros: Safer for cross-platform or unusual symbols.
• Cons: Less visually clear than the direct character.

2. Why HTML Entities (like ©) Don’t Work in CSS

Unlike HTML, CSS doesn’t interpret things like © or © as special entities. These are parsed literally as text. So in CSS, you need either:

• A raw character (in UTF-8), or
• A valid escape sequence \XXXX representing the codepoint.

3. Using the content Property in Selectors

The content property is typically used in a pseudo-element like ::before or ::after to insert decorative text/icons:

.notice::before {
  content: "\26A0 "; /* Unicode for warning sign ⚠ */
  color: red;
  margin-right: 4px;
}

.copyright::after {
  content: " © ";
}

• The text is not part of the DOM content; it’s purely visual.
• You can combine text with escapes, e.g., content: "Note:\00A0"; for a non-breaking space.

4. Examples of Common Symbols

.icon-phone::before {
  content: "\260E"; /* ☎ (Black Telephone) */
}

.icon-star::before {
  content: "\2605"; /* ★ (Black Star) */
}

.icon-heart::before {
  content: "\2665"; /* ♥ (Black Heart) */
}

/* or directly, if using UTF-8: */
.icon-star::before {
  content: "★";
}

5. Tips & Best Practices

1. Always confirm your CSS file encoding is UTF-8 if you’re pasting special characters directly.
2. Use Unicode escapes for clarity, especially if your team or environment might not preserve UTF-8 consistently.
3. Keep in mind the difference between pseudo-elements (styling) vs. actual content in the HTML. The content property isn’t read by screen readers in many cases, so for important info, place it in HTML.

Conclusion

To add “HTML entities” via CSS, place the actual character or its Unicode escape in the content property. HTML-style entities (like ©) do not work in CSS. This approach ensures your pseudo-elements or decorative icons appear correctly without depending on the HTML parser.