list-style & ::marker

ul.punkte  { list-style-type: disc; }
ul.kreise  { list-style-type: circle; }
ul.quadrate { list-style-type: square; }
ol.zahlen  { list-style-type: decimal; }
ol.roemisch { list-style-type: upper-roman; }
ol.buchstaben { list-style-type: lower-alpha; }

<div class="ls-demo">
<div>
  <h4>disc</h4>
  <ul class="ls-disc"><li>Äpfel</li><li>Birnen</li><li>Kirschen</li></ul>
</div>
<div>
  <h4>circle</h4>
  <ul class="ls-circle"><li>Äpfel</li><li>Birnen</li><li>Kirschen</li></ul>
</div>
<div>
  <h4>square</h4>
  <ul class="ls-square"><li>Äpfel</li><li>Birnen</li><li>Kirschen</li></ul>
</div>
<div>
  <h4>decimal</h4>
  <ol class="ls-decimal"><li>Äpfel</li><li>Birnen</li><li>Kirschen</li></ol>
</div>
<div>
  <h4>upper-roman</h4>
  <ol class="ls-roman"><li>Äpfel</li><li>Birnen</li><li>Kirschen</li></ol>
</div>
<div>
  <h4>lower-alpha</h4>
  <ol class="ls-alpha"><li>Äpfel</li><li>Birnen</li><li>Kirschen</li></ol>
</div>
</div>

/* Standard: Marker steht links vom Textblock */
ul { list-style-position: outside; }

/* Marker sitzt im Textfluss */
ul { list-style-position: inside; }

<div class="pos-demo">
<div>
  <h4>outside (Standard)</h4>
  <ul class="pos-outside">
    <li>Erster Eintrag mit etwas längerem Text, der in die zweite Zeile umbricht</li>
    <li>Kurzer Eintrag</li>
    <li>Noch ein längerer Eintrag, um den Unterschied deutlich zu machen</li>
  </ul>
</div>
<div>
  <h4>inside</h4>
  <ul class="pos-inside">
    <li>Erster Eintrag mit etwas längerem Text, der in die zweite Zeile umbricht</li>
    <li>Kurzer Eintrag</li>
    <li>Noch ein längerer Eintrag, um den Unterschied deutlich zu machen</li>
  </ul>
</div>
</div>

.todo    { list-style-type: "👉 "; }
.schritte { list-style-type: "→ "; }
.erledigt { list-style-type: "✓ "; }
.favoriten { list-style-type: "⭐ "; }

<div class="str-demo">
<div>
  <h4>Finger</h4>
  <ul class="ls-finger"><li>HTML lernen</li><li>CSS lernen</li><li>JavaScript lernen</li></ul>
</div>
<div>
  <h4>Pfeil</h4>
  <ul class="ls-arrow"><li>HTML lernen</li><li>CSS lernen</li><li>JavaScript lernen</li></ul>
</div>
<div>
  <h4>Häkchen</h4>
  <ul class="ls-check"><li>HTML lernen</li><li>CSS lernen</li><li>JavaScript lernen</li></ul>
</div>
<div>
  <h4>Stern</h4>
  <ul class="ls-star"><li>HTML lernen</li><li>CSS lernen</li><li>JavaScript lernen</li></ul>
</div>
</div>

/* Farbe und Gewicht ändern */
li::marker {
  color: #3b82f6;
  font-weight: 700;
}

/* Eigenen Inhalt setzen */
li::marker {
  content: "§ ";
  color: #7c3aed;
}

/* Nummerierte Liste stylen */
ol li::marker {
  color: #dc2626;
  font-weight: 700;
  font-size: 1.1em;
}

<div class="marker-demo">
<div>
  <h4>Farbe & Gewicht</h4>
  <ul class="mk-color"><li>Eintrag A</li><li>Eintrag B</li><li>Eintrag C</li></ul>
</div>
<div>
  <h4>Größe</h4>
  <ul class="mk-size"><li>Eintrag A</li><li>Eintrag B</li><li>Eintrag C</li></ul>
</div>
<div>
  <h4>Custom content</h4>
  <ul class="mk-content"><li>Eintrag A</li><li>Eintrag B</li><li>Eintrag C</li></ul>
</div>
<div>
  <h4>ol mit ::marker</h4>
  <ol class="mk-ol"><li>Schritt eins</li><li>Schritt zwei</li><li>Schritt drei</li></ol>
</div>
</div>

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;     /* Wichtig: Standard-Padding entfernen */
  display: flex;
  gap: 4px;
}

nav a {
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 6px;
}

<div class="nav-demo">
<nav>
  <ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Docs</a></li>
    <li><a href="#">Kurse</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>
</div>