How do I render spaces using css?

To render a space in the content property in CSS, you can simply include the space directly in the string. Here’s an example:

.my-class::before {
  content: 'Text: '; /* The space is included after the colon */
}

If you want to ensure it is a non-breaking space or use a specific type of space, you can use a Unicode escape or HTML entity:

Non-Breaking Space

.my-class::before {
  content: 'Text:\00a0'; /* \00a0 represents a non-breaking space */
}

Other Types of Spaces

Here are some other Unicode spaces you might want to use:

• \2002 for an en space
• \2003 for an em space
• \2009 for a thin space

Example with Specific Space:

.my-class::before {
  content: 'Text:\2003'; /* Adds an em space after 'Text:' */
}

These approaches ensure the space is rendered precisely as intended.