Beispiel:CSS-Selektoren-6.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Pseudoelemente - 5</title>
 <style>

a { padding: 0 1.5em; position: relative; }

a::before { content: ; width: 0; height: 0; font-size: 0; border: 10px solid transparent; border-left-width: 15px; border-left-color: steelBlue; position: absolute; top: 0; left: 0; }

a:hover::before { background: yellow; }

a::after { content: url("https://src.selfhtml.org/dok.gif"); margin-left: .1em; }

h2 { 

 position: relative;

}

h2::after { 

 content: ;
 position: absolute;
 left: 0;
 bottom: -0.3em;
 width: 4em;
 height: 0.2em;
 background: #c82f04;

}

p[class] { 

 border: thin solid var(--accent);
 padding: .5em;

max-width: 25em; } p[class]::before { 

 display: block;
 background-color: var(--accent);
 color: white;
 font: bold 1em sans-serif;
 margin: -.5em -.5em .5em -.5em;
 padding: .5em;
 content: attr(class) ": ";

}

.Achtung {--accent: #c82f04;}

ul li { 

 list-style-type: none;
 line-height: 200%;

}

visited {color: steelBlue;}



   </style>
 </head>
 <body>

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!

</body> </html>

Abgerufen am 30.08.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:CSS-Selektoren-6.html"