Understanding the CSS content Property and Its Limitations with ::before and ::after
This article explains how the CSS content property works with ::before and ::after pseudo‑elements, demonstrates which values are accepted or rejected—including numeric and calc() values—shows how to use counters and images, and highlights common pitfalls such as treating numbers as strings.
The CSS content property can be paired with the ::before and ::after pseudo‑elements to inject generated content into an element.
Typical usage with a string value works correctly, as shown in the basic example that displays the expected text.
However, certain values are invalid: raw numbers (e.g., 1 ) are treated as unit‑less lengths and the browser rejects them, and attempts to use calc() also fail.
One workaround is to coerce numbers into strings, but the result remains a string and cannot be reliably used for calculations such as pricing.
Pseudo‑elements can act as counters; for instance, a counter starting at 12 and decrementing by 2 for each sibling element can be generated via content: counter(myCounter, decimal); .
They can also render images, allowing an ::after pseudo‑element to display a picture instead of text.
Common practice is to use an empty string ( content: ""; ) to clear floats or create placeholders that can be positioned, sized, or given a background.
The original article (https://css-tricks.com/valid-css-content/) provides the full set of examples and screenshots.
UC Tech Team
We provide high-quality technical articles on client, server, algorithms, testing, data, front-end, and more, including both original and translated content.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.