html lists - CSS using images instead of bullets -


i want use 3 different images instead of bullets create lisli>t

example:

<ul>     <li>the dog big</li>     <li>the dog small</li>     <li>the dog medium sized</li> </ul> 

so instead of bullets before each of above phrases there different image before each.

live demo

this makes use of css property list-style-image.

html:

<ul>     <li class="b1">the dog big</li>     <li class="b2">the dog small</li>     <li class="b3">the dog medium sized</li> </ul> 

css:

ul {     margin: 0 0 0 32px;     line-height: 1.5 } .b1 {     list-style-image: url(http://upload.wikimedia.org/wikipedia/commons/1/19/icons-mini-icon_attachment.gif); } .b2 {     list-style-image: url(http://upload.wikimedia.org/wikipedia/commons/6/61/icons-mini-icon_security.gif); } .b3 {     list-style-image: url(http://upload.wikimedia.org/wikipedia/commons/a/ab/icons-mini-icon_clock.gif); } 

Comments

Popular posts from this blog

linux - Mailx and Gmail nss config dir -

c# - Is it possible to remove an existing registration from Autofac container builder? -

php - Mysql PK and FK char(36) vs int(10) -