Aufzählungszeichen in ULs austauschen

Die kleinen Aufzählungszeichen, gerne auch Bullets genannt, tausche ich gerne durch Icons oder kleine Grafiken aus, um der Seite einen individuelleren. Und so geht's!

Nicht nur die Aufzählungszeichen der ULs (ungeordnete Liste) werden eliminiert bzw. ausgetauscht. Du kannst auch standardmäßig vom jeweiligen Browser vorgegebene Abstände (Margin und Padding, sprich die Einzüge der Listenpunkte zum Text bzw. deren Abstände untereinander) verändern.

 

ul {
    list-style: none; /* So werden die Standardaufzählugszeichen gekillt */
    padding: 0; /* Browserübliche Abstände werden eliminiert */
    margin: 0; /* Browserübliche Abstände werden eliminiert */
}

li {
    padding-left: 16px;
}

li:before {
    content: "•"; /* Dieses Unicode-Zeichen ersetzt dann das Aufählungszeichen */
    padding-right: 8px;
    color: blue;
}