Listensymbol#

list-style-type#

Die CSS Eigenschaft list-style-type verändert die Darstellung des Listensymbols (marker).

Wert

Erklärung

none

Kein marker wird angezeigt.

disc

Ein gefüllter Kreis wird angezeigt.

circle

Ein Kreis wird angezeigt.

square

Ein gefülltes Quadrat wird angezeigt.

 
.list1 {
  list-style-type: none;
}

.list2 {
  list-style-type: square;
}

See the Pen list-style-type by csswebsite (@csswebsite) on CodePen.

list-style-image#

Durch die CSS Eigenschaft list-style-image ist es möglich ein Bild als marker zu verwenden.

ul {
  list-style-image: url('cs-logo.');
}

See the Pen list-style-image by csswebsite (@csswebsite) on CodePen.

list-style-position#

Die CSS Eigenschaft list-style-position setz die Position des marker relativ zu einer Liste. Damit ist gemeint, ob der marker innerhalb oder außerhalb der Liste sich befindet. Die Eigenschaftswerte sind:

  • inside

  • outside

ul {
  list-style-position: inside;
}

See the Pen list-style-position by csswebsite (@csswebsite) on CodePen.