CSS, HTML und Javascript mit {stil}

CSS display: list-item

CSS display list item anstelle von before

display: list-item bringt Elementen das Verhalten eines Listen-Elements bei und ist eine praktische Alternative zu :before, wenn ein Text oder ein Symbol vor eine erste Zeile gesetzt werden soll.

display: list-item ist immer dann interessant, wenn mehrere Zeilen mit einem Symbol oder Icon hervorgehoben werden sollen. Die klassische Methode – :before – kann die zweite oder dritte Zeile nicht einrücken.

Listen-Elemente setzen ein Listensymbol vor die erste Zeile und setzen zweite und folgende Zeilen eingerückt. Das Listensymbol des li-Elements in einer ungeordneten Liste ul lässt sich einfach per CSS gegen ein beliebiges Symbol austauschen.

Dieses Verhalten kann mit display: list-item auf beliebige HTML-Elemente angewendet werden.

Ein Text davon

Ein langer Text über zwei oder noch mehr Zeilen mit einem Listensymbol vor der ersten Zeile

Ein Text dahinter

.list {
    display: list-item;
    list-style-image: url(igel.png);
}

Der Text schließt weiterhin linksbündig zum umfassenden Element, das Listen-Symbol liegt außerhalb des Elternelements: Die Browser ziehen das künstliche Listenelemente nach links aus.

Da hilft nur ein Einzug mit margin oder padding zum linken Rand.

Ein Text davon

Ein langer Text über zwei oder noch mehr Zeilen mit einem Listensymbol vor der ersten Zeile

Ein Text dahinter

.list {
    display: list-item;
    list-style-image: url(igel.png);
    margin-left: 38px;
}