Chiar dacă listele au câteva oferte predefinite, se pot folosi şi alte opţiuni.
De exemplu, dacă se doreşte folosirea unei mingi se poate apela la următorul cod:
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
ul.minge li { list-style: none; margin-left: 0; padding-left: 0em; text-align:justify; } ul.minge > li:before { display: inline-block; content: "⚽"; width: 1.4em; margin-left: -1.4em; } |
HTML
|
1 2 3 4 5 |
<ul class="minge"> <li>Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee </li> <li>Tea</li> <li>Water</li> </ul> |
Efectul va fi următorul:
- Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee CoffeeCoffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee
- Tea
- Water
Dacă este necesară folosirea unor simboluri predefinite şi pentru liste multinivel, o variantă ar putea fi precum cea de mai jos:
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/* ------------------------------ Bullet pentru Check ------------------------------ */ ul.bifat li {list-style-type:none;} ul.bifat li:before { content: "\f046"; /* Unicode */ font-family: FontAwesome; display: inline-block; margin-left: -1em; width: 1.3em; color:blue; font-size:18px; text-align:justify; } ul.bifat li ul li { list-style-type:none!important; padding-left: 10px ; text-indent: -10px ; } ul.bifat li ul li:before { content: "\f0c8"; /* Unicode | f08d - pin */ font-family: FontAwesome; font-weight:bold; display: inline-block; color:blue; font-size:10px; padding-left:6px; } |
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<ul class="bifat"> <li>lorem ipsum</li> <li>lorem ipsum: <ul> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> </ul> </li> </ul> |
Efectul este precum cel de mai jos:
- lorem ipsum
- lorem ipsum:
- lorem ipsum
- lorem ipsum
- lorem ipsum
JSFiddle
Pentru o varietate de liste personalizate puteţi consulta şi exemplele următoare.
