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><h1>Pseudoelemente als Aufzählungszeichen</h1>

<ul>
	<li><a href="https://selfhtml.org">SELFHTML</a></li>
	<li><a href="https://forum.selfhtml.org">SELFHTML Forum</a></li>
	<li><a href="https://wiki.selfhtml.org">SELFHTML Wiki</a></li>
</ul>
    
<p class="Achtung"> Warnhinweise sollten so gekennzeichnet werden, <br>dass sie auch wirklich auffallen!</p>

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