Beispiel:CSS-Pseudo-3.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"> <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" > <title>Pseudoelement mit ::before</title> <style> .achtung { border: thin solid red; padding: 0.5em; }

.achtung::before { 

 content: "Achtung: ";
 color: red;
 font-weight: bold;

} h1 code::after { 

 content: "CSS ";
 display: inline-block;
 color: white;
 background: rebeccapurple;
 padding: 0 0.3em;
 margin-inline-start: 0.25em;
 border-radius:  0 .25em .25em ;

}

body { width: 40em; font-family: sans-serif; }


</style> </head> <body>

Pseudoelement mit ::before

Mit ::before und ::after generierte Inhalte dienen ausschließlich dekorativen Zwecken. Sie existieren nicht im DOM, können nicht als echter Text ausgewählt werden und werden möglicherweise von assistiven Technologien nicht gelesen.
Verlass dich niemals auf Pseudo-Elemente, um wichtige Informationen bereitzustellen, die Benutzer wahrnehmen oder mit denen sie interagieren müssen.

</body> </html>

Abgerufen am 29.08.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:CSS-Pseudo-3.html"