The content Property

The content property is required for ::before and ::after. It can contain text strings, URLs, attribute values, counters, or be empty.

Example

/* Static text */
.version::before { content: "v"; }

/* Attribute value */
a[href]::after { content: " (" attr(href) ")"; }

/* URL (loads an image) */
.icon::before { content: url("icon.svg"); }

/* Counter */
ol li::before { content: counter(list-counter) ". "; }

/* Empty (for decorative shapes) */
.divider::after { content: ""; display: block; height: 2px; }

CSS

Full Editor

Pro Tip

Use attr() in content to display HTML attribute values — useful for printing link URLs beside anchor text.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned