Neon DistrictISSUE #31 of 50

content · generated text · attr()

PrismaVSJank the Janitor

Prisma saysThe content property can pull in attribute values with attr() for generated labels.

Inside ::before/::after, content: attr(data-label) prints the value of an attribute. Combine static strings and attr() to build tooltips, badges, or print-friendly link URLs. It keeps the label in the HTML and the presentation in CSS.

Power-ups you unlock

content: attr(data-x) prints an attribute value
Mix strings + attr() in one content value
Great for tooltips, badges, print URLs
Keeps data in HTML, styling in CSS

Jank the Janitor attacks — common mistakes

Putting must-read content in generated content
attr() mostly limited to strings
Forgetting the data-* prefix

Boss battleAppend a count to a chip with content:" · " attr(data-count).

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>.chip::after{content:" · " attr(data-count);color:#8aff9d}</style></head><body style="background:#06040d;color:#e6e0ff;padding:20px"><span class="chip" data-count="12">messages</span></body></html>

▶ Open the interactive comic issue

‹ Counters · Counter-Reset · Counter-Increment User-Select · Drag · Disabling Text Select ›