Content property

Learn pseudo-element content with the content property.

The content property

The boxes added by ::before and ::after are empty by default; they show nothing. For anything to appear you must set the content property. It is required on pseudo-elements; without it the element is never created.

The simplest value is a quoted string: content: "Note" shows the text "Note" inside the pseudo-element. Drop the quotes and the browser reads the value as a CSS keyword, then silently drops it.

content value kinds

content takes more than plain text. Three common value kinds: a string ("New"), an image (url("arrow.svg")), and an attribute (attr(href)). Each fits a different job.

For example, a::after { content: attr(href); } prints the destination address next to each link. This single line is the classic way to show link addresses on printed pages.

Exercise Add content with ::after

Add an ::after pseudo-element to the .tip class selector. Inside, declare a content value (a quoted string), then color: navy and font-weight: bold.

Show example solution

/* add ::after for the hint */
.tip::after {
  content: "Hint";
  color: navy;
  font-weight: bold;
}

Test yourself

What happens to an ::after without content?
```
.note::after {
  color: navy;
}
```
- It shows an empty box
- The browser throws an error
- Nothing appears; the element is not created
- It echoes the HTML content
Show answer

Nothing appears; the element is not created — Correct. ::before and ::after require content; without it the box is not created.

Complete the content declaration

a::after {
  ____: '↗';
}

Show answer

a::after {
  content: '↗';
}

Match each content value to its kind

"New"

Plain text
url("arrow.svg")

Image
attr(href)

From an attribute
""

Empty value

Next lesson: ::first-letter and ::first-line

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies