Beispiel:CSS-Pseudo-4.html
<!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> p[class] {
border: thin solid var(--accent); padding: .5em;
} 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;} .Empfehlung {--accent: #dfac20;}
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>
Pseudoelemente mit ::after und ::before
einfache Selektoren sind in ihrer Wirkung auf Elemente als Ganzes beschränkt. Bei Pseudoelementen handelt es sich um Selektoren, die diese Beschränkung aufheben. Ein Pseudoelement erzeugt einen nicht im Elementbaum vorhandenen Abschnitt, der formatiert oder mit Inhalt gefüllt werden kann.
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.
Verwende Pseudo-Elemente nur zur Dekoration und für Hinweise, niemals für den eigentlichen Inhalt!
</body> </html>
