---
url: /docs/foundations/css-classes/content.md
---
> Typography

# Content

Utilities for controlling the content of the before and after pseudo-elements.

## Quick reference

| Class             | Description      |
|-------------------|------------------|
| `content-none`    | `content: none`  |
| `content-empty`   | `content: ""`    |
| `content-[{str}]` | `content: {str}` |

> Available values 
> `{str}`: Can be any string, will usually contain single-quotes as seen in the examples below

## Basic usage

### Setting a pseudo-element's content

Use the square bracket notation to define any arbitrary content value on the fly with the `content-[{value}]` utilities.
Prefix with the `before:` and `after:` variant modifiers to set the contents of the `::before` and `::after` pseudo-elements.

```html
<span class="before:content-['Before'] after:content-['after'] ..."> I am </span>.
```

### Setting an empty content for pseudo-elements

Use the `content-empty` utilities along with the `before:` and `after:` variant modifiers
to set an empty content for the `::before` and `::after` pseudo-elements.

```html
<span class="before:content-empty before:inline-block before:h-14 before:w-14 ..."> I am after a pink square</span>.
```

### Using spaces and underscores

Since whitespace denotes the end of a class in HTML, replace any spaces in an arbitrary value with an underscore.

```html
<div class="before:content-['Hello_World!']">!</div>
```

If you need to include an actual underscore, you can do this by escaping it with a backslash.

```html
<div class="before:content-['Hello\_World']">!</div>
```