Sunday, June 11

Styling List li Elements To Square, Circle and Image

Styling List li Elements To Square, Circle and Image

List elements <li> are used to make a list with points with in a html document and these points can be circle , square or disc. By default the list <li> points are represented with a disc but you can style them further with use of custom CSS. Below is the CSS for each type of list points which can be used in html also in the end of article there is CSS which can be used if you want to use any custom image in place of these points.

Live Demo

Table of contents 

CSS for square list type

ul li {
list-style-type:square;
}
ul li a:hover {
text-decoration:none;
}

CSS for circle list type

ul li {
list-style-type:circle;
}
ul li a:hover {
text-decoration:none;
}

CSS for disc list type

ul li {
list-style-type:disc;
}
ul li a:hover {
text-decoration:none;
}

CSS for image list type

ul li {
list-style-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitL-HKWQuNY96_mfoaBUQV7Bfm986xBH1d-eum21xq9Itu9t7Aaasg7o_t7lpCtHp2Sj-2m-p_d51rvhB-6wxc9hqO6cvx9R2d7n5-s1LAvDmx6jQLOlmKUUn132Jid54bV_7Up24KJsVj/s1600/big-square.gif');
}
ul li a:hover {
text-decoration:none;
}


Where to add CSS ?

To add CSS in blogger go to Blogger > Theme > Customize > Advanced > Add CSS enter CSS , press enter once and Apply to blog.
For wordpress launch your site customizer then click on the CSS tab to access the CSS editor.