Jeder der einen Text schreibt kenn die Funktion der Listen. Oft verwenden wir diese um Punkte aufzuzählen oder eben um eine Liste zu machen – #hust ist ja das Gleiche aber lassen wir es mal so stehen 😛

Heute zeige ich euch wie man diese einfachen Punkte bei einer Liste mit einem eigenen Bild ersetzen kann. Das geht nämlich sehr schnell und einfach und sieht einfach spitze aus. Eigentlich braucht man dafür nur 1 Befehl und schon ist es gemacht, der Rest ist jetzt nur noch dazu da um die Liste schöner und passender zum Bild zu machen.

Video / Anleitung

CSS

1
2
3
4
5
6
7
8
9
10

  li {
            font-size: 24px;
            font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
            letter-spacing: 7px;
            color: #444444;
        }
        ul {
            list-style-image: url("ghost.png");
 
        }

HTML

1
2
3
4
5
6
7
8

 <div class="container">
    <ul>
    <li>Listenpunkt 1</li>  
    <li>Listenpunkt 1</li> 
    <li>Listenpunkt 1</li> 
    <li>Listenpunkt 1</li> 
    </ul>
    </div>