Here’s what I didn’t know about “content”

This title could be clearer and more informative.Try out Clickbait Shieldfor free (5 uses left this month).

A deep dive into lesser-known capabilities of the CSS `content` property beyond basic pseudo-element usage. Covers using `content` with images and gradients (with browser support caveats), defining alt text for accessibility, combining text and images, replacing element content, the `open-quote`/`close-quote`/`no-open-quote`/`no-close-quote` keywords with language-aware nested quotes, and the difference between `counter()` and `counters()` for nested custom counters. Includes CodePen examples and accessibility considerations around putting text in CSS files.

7m read timeFrom matuzo.at
Post cover image
Table of contents
How I’m using the content attribute.Content accepts images and gradientsYou can define alt text for content values (…in Chrome)You can combine text and imagesYou can only replace the content of a regular element with an <image>There are quotes and no-quotesThere’s counter() and counters()Updates