🔤 attr() — Using HTML Attributes Inside CSS

🌐 What is the attr() Function?

The attr() CSS function allows you to use the value of an HTML attribute directly inside CSS. Today, attr() is mainly used in generated content (like with ::beforeand ::after), but Level 4 extends it for general property usage (still experimental).

>>“attr() brings dynamic content from HTML into CSS — great for labels, badges, tooltips, and more.”

Note

✔ Fully supported for content:⚠️ Experimental for other CSS properties like width, color, etc.

🎯 Why Use attr()?

  • Display attribute values visually (e.g., data-* attributes)
  • Create dynamic labels without JavaScript
  • Build tooltips using pure CSS
  • Auto-populate UI elements based on attributes
  • Use dynamic values for content generation

📌 Syntax

attr() Syntax

attr(<attribute-name>, <type>?)

Example types (Level 4 proposal):string, color, url, integer, length, etc. ⚠️ Browser support varies → safest type is string.

🧪 Example 1 — Showing Data Attributes

Badge using attr()

.badge::after {
  content: attr(data-count);
  background: red;
  color: white;
  padding: 4px 8px;
  border-radius: 10px;
}

If HTML is:

HTML Example

<div class="badge" data-count="5"></div>

→ It renders a red badge showing **5**.

🧪 Example 2 — Tooltip With attr()

Tooltip Example

.tooltip:hover::after {
  content: attr(data-tip);
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px;
  background: #333;
  color: white;
  border-radius: 4px;
  white-space: nowrap;
}

HTML

<span class="tooltip" data-tip="Hello!">Hover me</span>

Hovering shows the tooltip text taken from data-tip.

🧪 Example 3 — Labels Without JavaScript

Label with attr()

label::after {
  content: " (" attr(data-required) ")";
  color: #d00;
}

HTML

<label data-required="required">Password</label>

Renders → “Password (required)” Perfect for form indicators.

📐 Example 4 — Dynamic Content for Cards

Card Title Example

.card::before {
  content: attr(data-title);
  font-weight: bold;
  font-size: 1.2rem;
}

HTML

<div class="card" data-title="Product Name"></div>

🎨 Upcoming Feature — Using attr() for CSS Properties

CSS Level 4 adds support like:

Experimental Usage

.box {
  width: attr(data-size length);
  color: attr(data-color color);
}

Note

⚠️ These advanced features are **experimental** and work only in some browsers behind flags.

🧠 Practical Use Cases

  • Badges with dynamic counts
  • Tooltips without JavaScript
  • ARIA labels or alt-text display
  • Custom data-driven UI elements
  • Auto-filling icons, prices, names from attributes

📱 Example — Button Showing Keyboard Shortcut

Keyboard Shortcut Label

button::after {
  content: " (" attr(data-shortcut) ")";
  opacity: 0.6;
}

HTML

<button data-shortcut="Ctrl+S">Save</button>

⚠️ Common Mistakes

  • ❌ Trying to use attr() outside content in CSS → currently limited
  • ❌ Forgetting attribute must exist in HTML
  • ❌ Using complex types where browser support is incomplete
  • ❌ Expecting attr() to update instantly without re-render (depends on attribute changes)

Note

🧠 attr() is reactive — updating the HTML attribute updates the CSS-generated content.

🔥 Summary

attr() is a powerful tool for using HTML attribute values inside CSS. It shines in generated content, enabling badges, tooltips, labels, and dynamic UI details without JavaScript. As CSS evolves, attr() will become even more flexible for property values.

>>“attr() bridges the gap between HTML semantics and visual styling — simply, cleanly, and dynamically.”

Learn more →MDN Docs 📘