v136 · css

attr() Content Builder

Generate CSS ::before and ::after content driven by HTML data attributes — switching between the new raw-string keyword, the deprecated string form, and plain untyped attr(). Live probes reveal which forms your current browser accepts.

Builder

Configure

data-badge value

data-note value

attr() type keyword

Pseudo-element

Preview

API Feature Card

The pseudo-element above/below reflects the data attribute via CSS content:

Generated CSS

Browser support probes

attr(… raw-string)

attr(… string)

attr(… type(raw-string))

attr(…) untyped

Why the rename? The CSS Values Level 5 spec resolved to use raw-string instead of string so the keyword aligns with type() function syntax and clearly distinguishes unprocessed string values from other typed forms like number or color.