Beispiel:CSS-Selektoren-5.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</title>
  <style>
.hinweis { 
  border:medium solid red; 
  width: 30em;
}
.hinweis::before { 
  background-color: red;
  color: white; 
  content: 'Warnhinweis: ';
  font-weight: bold;
  padding: 0 1em;
  margin-right: 1em;
}

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


    </style>
  </head>
  <body>
  
  <h1>Pseudoelemente</h1>
  
  <p class="hinweis">Warnhinweise sollten auffällig gekennzeichnet werden, damit sie auch wirklich auffallen!</p>
  
    <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>