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;
}

li {
  list-style-type: none;
  line-height: 200%;
}

    </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>
  </body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-Selektoren-6.html&oldid=85473“