CSS list-style-image • Bilder als Aufzählungszeichen in Listen

Position von Listensymbolen

Die exakte Position für das Bild kann nicht via CSS list-style-image festgelegt werden. list-style-position kann zwar festlegen, ob Listenelemente eingezogen werden oder nicht, aber eine präzise Kontrolle über ein Bild als Listensymbol erzielt nur CSS background-image anstelle von list-style-image.

• Montag
  • Sport
  • Mathematik
  • Physik
• Dienstag
• Mittwoch

CSS ul { margin-left: 0; } steuert den Einzug vor Listeneinträgen – bzw. setzt Listen linksbündig mit dem Text.

.buts {list-style-image:url(closed.svg) }
.active { list-style-image:url(open.svg) }

<ul class="buts"> 
    <li class="active">Montag
        <ul>
            <li>Sport</li>
            <li>Mathematik</li>
            <li>Physik</li>
        </ul>
    </li> 
    <li>Dienstag</li> 
    <li>Mittwoch</li> 
</ul>

list-style-image ist erblich. Darum zeigen auch die ul-Elemente der zweiten Ebene ein Aufzählungssymbol.

::marker

::marker ist ein Pseudo-Element und steuert das Aussehen von Aufzählungszeichen oder Nummerierungen. ::marker wirkt auf alle Merkmale der Schrift (font-size, font-family, …), auf white-space, color, content und sogar auf animation und transform. Apple Safari unterstützt allerdings content, animation und transform nicht.

ul.haushalt li::marker {
  font-size: 3rem;             /* Größe anpassen */
  transform: translateX(-10px) /* nicht Mac OS Safari */
}

• Waschmaschine
• Backofen
• Mikrowelle
• Kaffeemaschine

list-style-image mit background-image

Die Position des Listensymbols bestimmen – das geht mit background-image.

• Montag
• Dienstag
• Mittwoch
• Donnerstag
• Framstag

Natürlich funktioniert ein normales Bild – sei es ein .png, .webp oder .jpg. Mit einem konischen Verlauf – conic-gradient – entstehen hier Sterne.

ul.star {
	list-style:none;
	font-size:1.3rem;
}
ul.star li::before {
	content: '' !important;
	background-image: repeating-conic-gradient(hsl(200,90%,88%) 0 36deg, hsl(200,80%,60%) 36deg 72deg);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
	margin: 0 5px -0.5rem -1rem;
	background-size: cover;
	display: inline-block;
	height: 45px;
	width: 45px;
}

Am Rande: CSS conic-gradient ist exotisch, aber bringt neben Sternchen seriöse Tortengrafiken mit reinem CSS.

Sonderzeichen und Bilder für Listen

Mit CSS content::before kann auf die kleinen Bilder als Listensymbol zugunsten von Sonderzeichen verzichtet werden. Internet Explorer unterstützt content::before ab IE8.

ul.char { list-style-type:none;}
ul.char li::before { 
    color:green; 
    font-size: 1em;
    content: "♫ "; 
               ▲
               └-- Leerzeichen für den Abstand
}

Aufzählungszeichen in Listen lassen sich mit content::before flexibler durch Schriftgröße und -farbe anpassen als mit list-style-image.

Ein Bild mit content::before in Listen einsetzen. Das Bild kann optional mit position:absolut in ein relativ positioniertes li gesetzt werden, um seine Position mit top, bottom, left und right zu fixieren.

ul.charS { margin-left: 2em; list-style: none; }
ul.charS li { position: relative; line-height: 180%}
ul.charS li::before { 
     position:absolute;
     left: -2em;
     content: url(listen.svg) " " 
                   ▲           ▲
                   |           |
   url des Bildes  ┘           |
ein Leerzeichen Abstand lassen ┘
}

Jedes Listenelement mit eigenem Icon

::before kann jeden li-Element ein anderes Bild zuordnen.

• Montag
• Dienstag
• Mittwoch
• Donnerstag
• Framstag

.icon li:nth-child(1)::before {content: url(icon-1.png) " ";}
…
.icon li:nth-child(5)::before {content: url(icon-5.png) " ";}

.icon li:nth-child(1)::before {content: url(svg/icon-1.svg) " ";}
… 
.icon li:nth-child(5)::before {content: url(svg/icon-5.svg) " ";}

list-style-image – Referenz

Erblich: Ja

list-style-image

list-style-image ist die Adresse eines Bildes, das als Aufzählungssymbol in einer Liste benutzt wird.

Werte

<uri> | none | inherit

<uri>

<uri> ist der Pfad eines Bildes. Die Adresse muss in Klammern und von Hochkommas eingeschlossen sein.

none

none ist die Voreinstellung und gibt an, dass kein Bild eingespielt wird. Die Angabe von none stellt sicher, dass vorangegangene Deklarationen nicht weiter angewendet werden.