Pseudoelemente - leer und mit Bild
Aufmerksamkeit mit Pseudoelementen erwecken
Texte gestalten
Leere Pseudo-Elemente (::before
, ::after
) werden oft auf zwei sehr unterschiedliche Arten verwendet:
- Funktional
Sie fügen etwas hinzu, das einen UI-Zweck hat oder einen Status anzeigt.
Beispiel: Ein Dreiecksmarker in einer Liste. Er signalisiert eine Hierarchie oder einen Navigationspfeil.
Er verhält sich fast wie ein Symbol, jedoch ohne zusätzlichen HTML-Code.
- Dekorativ
Sie fügen rein visuelle Akzente hinzu, die für die Bedeutung nicht wesentlich sind.
Beispiel: die farbige Unterstreichungsleiste unter einer Überschrift.
Sie verbessert das Design, verändert aber weder Inhalt noch Struktur.
Warnhinweise sollten so gekennzeichnet werden,
dass sie auch wirklich auffallen!