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
- CSS for circle list type
- CSS for disc list type
- CSS for image list type
- Where to add CSS ?
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;
}
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.
