:before and :after


Use the content attribute to add text to the pseudo-selectors :before and :after

Property values

This property may only be used in the definitions for :before and :after pseudo selectors. The text specified by the content property will be inserted just before or just after the element's actual text.

The content property may have arbitrary Unicode sequences placed within it by using the escape sequence, a reverse-solidus \ followed by two, four, or six hexadecimal digits.

CSS counters can be placed within content by using the counter(C) function, passing the name of a counter C that has been declared elsewhere with counter-reset.


/* Generating content after an element */
a::after {
content: "→";

/* Generating content with a Unicode space character */
a::after {
content: "00A0→";

/* Generating content with a CSS counter */
h1:first-of-type {
counter-reset: C;
h1::before {
counter-increment: C;
content: "Section " counter(C) ":";

style > generate > content:before and :after

🔗 🔎