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>CSS-Beispiel: Pseudoelemente als Aufzählungszeichen</title>
 <style>

a::after { 

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

}

a { 

 padding: 0 1em;
 position: relative;

}

a::before { 

 content: ;
 width: 0;
 height: 0;
 font-size: 0;
 border: thick solid transparent;
 border-left-color: currentColor;
 position: absolute;
 top: 3px;
 left: 0;

}

a:hover::before { 

 background: yellow;

}

p { border: thin solid var(--red); padding: 0.5em; width: fit-content; }

p::before { display: block; background: var(--red); color: white; font: bold 16px sans-serif; margin: -0.5em -0.5em 0.5em -0.5em; padding: 0.5em; content: attr(class); }

li { 

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

}

root {
 --red: #c82f04;

} 

   </style>
 </head>
<body>

Pseudoelemente als Aufzählungszeichen

Warnhinweise sollten so gekennzeichnet werden,
dass sie auch wirklich auffallen!

</body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-Selektoren-6.html&oldid=100349“