Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >attr()

attr()

attr(Name) attr(Name, Ersatzwert) attr(Name type(<Typ>), Ersatzwert)

Liest ein Attribut eines Elements und setzt seinen Wert in CSS ein. In der Eigenschaft content funktioniert das seit jeher in allen Browsern: Der Text eines data-*-Attributs wird in ::before oder ::after ausgegeben. Die neuere Syntax mit einem Typ (type(<color>), px …) erlaubt den Wert eines Attributs in jeder Eigenschaft – noch unterstützen sie aber nicht alle Browser.

Werte

  • attr(data-tip) – der Wert des Attributs als Text; in content in allen Browsern.
  • attr(data-tip, "keine Beschreibung") – ein Ersatzwert, wenn das Attribut fehlt; Chrome ab 133, Firefox ab 119, Safari ab 18.4.
  • attr(data-color type(<color>), black) – der Wert umgewandelt in eine Farbe, eine Länge, eine Zahl … in jeder Eigenschaft; Chrome ab 133, Firefox ab 155, Safari noch nicht (Stand Oktober 2026).
  • attr(data-width px) – eine Zahl aus dem Attribut mit Einheit; Unterstützung wie bei type().

Beispiele

Ein Tooltip aus dem Attribut data-tip, der beim Darüberfahren erscheint:

<button class="tip" data-tip="Speichert die Änderungen">Speichern</button>

.tip { position: relative; }
.tip:hover::after {
  content: attr(data-tip);
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  padding: 2px 6px;
  background: #263238;
  color: #fff;
  white-space: nowrap;
}

Das Ergebnis: Fährt man mit der Maus über die Schaltfläche, erscheint darunter ein dunkler Tooltip mit dem Text „Speichert die Änderungen“.

Beim Drucken wird hinter Links ihre Adresse ausgegeben:

<p>Mehr unter <a href="https://www.example.com/">example.com</a>.</p>

@media print {
  a[href^="http"]::after { content: " (" attr(href) ")"; }
}

Das Ergebnis auf Papier: „Mehr unter example.com (https://www.example.com/).“ Auf dem Bildschirm ändert sich nichts.

Farbe und Breite eines Balkens aus Attributen – die Syntax mit Typ für Browser, die sie kennen, mit einem gewöhnlichen Wert für die übrigen:

<div class="bar" data-color="#43a047" data-percent="70"></div>

.bar {
  height: 12px;
  width: 50%;
  width: calc(attr(data-percent type(<number>), 50) * 1%);
  background: #0088d1;
  background: attr(data-color type(<color>), #0088d1);
}

Das Ergebnis: In Chrome und Firefox ein grüner Balken über 70 % der Breite, in Safari ein blauer über die Hälfte (Stand Oktober 2026). Ein Browser, der die Syntax mit Typ nicht kennt, verwirft die ganze Deklaration und verwendet die vorherige.

Worauf Sie achten sollten

  • Ohne die Syntax mit Typ liefert attr() nur Text – width: attr(data-width) funktioniert auch mit einer Zahl im Attribut nicht.
  • attr(href) gibt die Adresse genau so aus, wie sie im Attribut steht – ein relativer Link bleibt relativ.
  • Text aus content steht nicht im HTML: Er lässt sich nicht markieren und kopieren, und Screenreader lesen ihn womöglich nicht vor. Wichtige Inhalte gehören nicht dorthin.

Browserunterstützung

Baseline – weithin verfügbar: funktioniert in allen gängigen Browsern, und das schon lange (spätestens seit 2015). Ab Version: Chrome 2, Firefox 1, Safari 3.1. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
content
::before und ::after
Attributselektor ([attribut])
counter() und counters()
var()