Beispiel:CSS-counter-2.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">
	<link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <title>Zählen mit CSS counter() - 2</title>
  <style>
body {
  counter-reset: posMarkup 0;  
}  
p {
  padding-left: 1em;
  position: relative;
}


p::before {
  counter-increment: posMarkup;	
  content: counter(posMarkup, upper-roman);
  position: absolute;
  width: 1em;
  left: 0;
  color: red;
}
</style>
</head>
 
<body>
  <h1>Zählen mit CSS counter() - 2</h1>
 
<section>
  <h2>Abschnitt 1</h2>
  <p>Mit <code>counter()</code> können Sie Elemente auf einer Seite (durch-)zählen.</p>
  <p>Hier werden die Absätze der Seite gezählt.</p>
  <p><code>counter-increment</code> übergibt einer dort festgelegten Variable den Zählwert.</p>
  <p>Mit <code>counter()</code> kann dieser wieder ausgegeben werden.</p>
</section>

<section id="dummy">
  <h2>Abschnitt 2</h2>
  <p>In diesem Abschnitt würde die Zählung neu beginnen.</p>
  <p>Durch <code>counter-reset</code> wird für das gemeinsame Elternelement ein Zähler für alle Absätze initialisiert.</p>
</section>  

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