Pseudoelemente - leer und mit Bild

Aufmerksamkeit mit Pseudoelementen erwecken

Texte gestalten

Leere Pseudo-Elemente (::before, ::after) werden oft auf zwei sehr unterschiedliche Arten verwendet:

  1. 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.
  2. 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!