Domyślny styl wypunktowania listy zapewne każdemu jest dobrze znany. W poniższym przykładzie zastąpimy standardowe wypunktowanie listy w postaci czarnych kropek. Zmienimy kolor oraz dodamy jako element wypunktowania znak specjalny w postaci strzałki. Z kolei w następnym przykładzie posłużymy się znakiem zaciągniętym z dodatkowego fontu.
Lista w HTML
W kodzie HTML lista wygląda następująco.
<ul>
<li>Jeden</li>
<li>Dwa</li>
<li>Trzy</li>
</ul>Jako użytkowcy listę w przeglądarce zobaczymy w następującej postaci.
- Jeden
- Dwa
- Trzy
Zmiana koloru oraz stylu wypunktowania listy w CSS
W pierwszym przykładzie element wypunktowania listy będzie stanowił znak specjalny w postaci strzałki.
ul { list-style: none; }
ul li { position: relative; }
ul li:before {
position: absolute;
top: 0;
content: "\2192";
color: red;
font-weight: bold;
font-size: .9em;
display: inline-block;
width: 2em;
margin-left: -1.5em;
}Przykład
- Jeden
- Dwa
- Trzy
W kolejnym przykładzie znak specjalny będzie w formie koła. W tym celu posłużymy się domyślą biblioteką ikon WordPress Dashicons. Możesz również posłużyć się dowolną inną biblioteką ikon np. Font Awesome.
ul { list-style: none; }
ul li { position: relative; }
ul li:before {
position: absolute;
top: 5px;
font-family: "dashicons";
content: "\f159";
color: green;
font-weight: bold;
font-size: .6em;
display: inline-block;
width: 2em;
margin-left: -2.5em;
}- Jeden
- Dwa
- Trzy