Beispiel:CSS-counter-1.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">
<title>Literatur Blog mit counter()</title>
<style>
body {
counter-reset: abschnitt;
}
section {
counter-increment: abschnitt;
margin: 1em 0;
padding: 1em;
border: thin solid;
}
section h2:before {
content: counter(abschnitt) ;
font-weight: bold;
color: red;
border: medium solid;
border-radius: 50%;
width: 1em;
padding: 0.2em;
margin-right: 1em;
aspect-ratio: 1 / 1;
display: inline-block;
text-align: center;
}
body {
font-family: Arial, sans-serif;
margin: 0 auto;
max-width: 50em;
}
</style>
</head>
<body>
<h1>Literatur Blog</h1>
<section class="section">
<h2>Die Magie der Klassiker</h2>
<p>Entdecken Sie die zeitlosen Werke von Autoren wie Goethe, Schiller und Kafka. Erfahren Sie, warum diese Klassiker auch heute noch relevant sind.</p>
<a href="#">Weiterlesen...</a>
</section>
<section class="section">
<h2>Moderne Literatur: Trends und Tendenzen</h2>
<p>Ein Blick auf die aktuellen Trends in der Literaturwelt. Welche Themen und Stile sind derzeit besonders gefragt?</p>
<a href="#">Weiterlesen...</a>
</section>
<section class="section">
<h2>Literaturverfilmungen: Vom Buch zum Film</h2>
<p>Welche Bücher haben es auf die große Leinwand geschafft? Eine Analyse der besten Literaturverfilmungen und ihrer Umsetzung.</p>
<a href="#">Weiterlesen...</a>
</section>
<section class="section">
<h2>Autor des Monats: Haruki Murakami</h2>
<p>Ein Porträt des japanischen Autors Haruki Murakami. Erfahren Sie mehr über sein Leben, seine Werke und seinen Einfluss auf die moderne Literatur.</p>
<a href="#">Weiterlesen...</a>
</section>
</body>
</html>
