Beispiel:CSS-Selektoren-6.html
Aus SELFHTML-Wiki
<!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:Grundlayout.css">
<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>
<h1>Pseudoelemente - leer und mit Bild</h1>
<h2>Aufmerksamkeit mit Pseudoelementen erwecken</h2>
<ul>
<li><a href="https://selfhtml.org">SELFHTML</a></li>
<li><a href="https://forum.selfhtml.org">Forum</a></li>
<li><a href="https://blog.selfhtml.org">Blog</a></li>
</ul>
<h2>Texte gestalten</h2>
<p>Leere Pseudo-Elemente (<code>::before</code>, <code>::after</code>) werden oft auf zwei sehr unterschiedliche Arten verwendet:</p>
<ol>
<li><strong>Funktional</strong><br>Sie fügen etwas hinzu, das einen UI-Zweck hat oder einen Status anzeigt.<br>
Beispiel: Ein Dreiecksmarker in einer Liste. Er signalisiert eine Hierarchie oder einen Navigationspfeil.<br>
Er verhält sich fast wie ein Symbol, jedoch ohne zusätzlichen HTML-Code.
</li>
<li><strong>Dekorativ</strong><br>
Sie fügen rein visuelle Akzente hinzu, die für die Bedeutung nicht wesentlich sind.<br>
Beispiel: die farbige Unterstreichungsleiste unter einer Überschrift.<br>
Sie verbessert das Design, verändert aber weder Inhalt noch Struktur.</li>
</ol>
<p class="Achtung"> Warnhinweise sollten so gekennzeichnet werden, <br>dass sie auch wirklich auffallen!</p>
</body>
</html>
