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