content
Generate supplementary text and images, including pseudo-element content.
Overview
| Class | Declarations |
|---|---|
content:normal | content: normal;
|
content:none | content: none;
|
content:no-open-quote | content: no-open-quote;
|
content:no-close-quote | content: no-close-quote;
|
content:<value>|<…> | content: <value> <…>;
|
content:url(<…>) | content: url(<…>);
|
content:linear-gradient(<…>) | content: linear-gradient(<…>);
|
content:image-set(<…>) | content: image-set(<…>);
|
content:counter(<…>) | content: counter(<…>);
|
content:attr(<…>) | content: attr(<…>);
|
Basic usage
Add indicators for external links
Apply a descendant selector to add a supplementary arrow after links whose href begins with http. The selector stays on the article; the generated content belongs to each matching link.
<!-- Descendant selector · external link --><article class="font-md leading-lg content:'\00a0↗'_:where(a[href^='http'])::after"> <p class="m:0">Read the <a id="target" class="underline text-blue" href="https://www.example.com">project website</a>.</p> <p class="m:0">Return to <a class="underline" href="/en/reference/content">this reference</a>.</p></article>The URL-prefix test is not an origin comparison: it also matches absolute links to your own site. Keep link text meaningful without the arrow. Generated content can be announced by assistive technology and should not carry essential instructions.
Resolve whitespaces in the value
HTML whitespace separates class names. Inside a quoted content string, \00a0 encodes a non-breaking space without splitting the utility.
<!-- Escaped non-breaking space --><a id="target" class="font-md underline text-blue content:'\00a0↗'::after" href="https://www.example.com">Project website</a>A theme token can hold a quoted string with ordinary whitespace. Keep its declaration in your stylesheet:
@theme { --content-external: " ↗";}<!-- Quoted theme value --><a id="target" class="font-md underline text-blue content-external::after" href="https://www.example.com">Project website</a>The two strings use different spaces: the escape is non-breaking, while the token contains an ordinary space. The readout shows the browser’s actual ::after content.
Apply conditionally
Hover or focus this link to generate its arrow. The base pseudo-element has content:none; the link’s name and destination stay available in every state. Print removes the supplementary arrow.
<!-- Pointer and keyboard · same link --><a id="target" class="font-md underline text-blue content:none::after content:none::after@print content:'\00a0↗':hover::after@screen content:'\00a0↗':focus-visible::after@screen" href="https://www.example.com">Project website</a>The state selector comes before ::after. Apply conditions to the originating element so pointer and keyboard interaction can actually trigger them.