As you know that I always tried to publish interesting and new tricks. Each and every person who runs his / her own blog or website wants to make the blog/website more and more beautiful. In this article you will be able to learn and understand how to customize the bullet lists using CSS. Therefore, today I published a new trick to make use of CSS for customizing bullet list style. The people who are running their own blog or website then there is an article for them published by Shiraz Shakeel. You all know that CSS is the best way to customize your blog/website. This trick is with a special, unique and attracting and also a hover effect. To apply this trick you must follow the following CSS trick.
- Open Your Template
- Search For ]]>
- Add below code just above ]]>
.post ul {
list-style: none;
}
.post ul li {
line-height: 1.4em;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDcfZsa1lBxm09FS0o2XfE4FYH6FL1KEAZnqnDnpOJPlaK290qAJOnh5eZWWC5Wp_X8ObfBsi5jP3GLS0Z6rNOaf8EQcqZiAn94c6yJ2E6xcA5tAQ9Xw5aBGCdK1A8uktBq675lnNdBSU/s1600/blue-bullet-icon.png) no-repeat scroll 0 5px;
margin: 0.3em 0;
padding: 0 0 0.8em 20px;
}
.post ul li:hover {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf2qYLZ9U1F3XXxiYYP-Z2FqqwzWGRce0tzJI-9n2enMbZLBAc1ry73_AQVSq2yDIPPcZKpN5y5r8j3BGEIr3ExuRwx9lr97CFkp5kPylJHyPTZeiSbE2G-LrHahNHepIZS6yA75ZKMiQ/s1600/green-bullet-icon.png) no-repeat scroll 0px 5px;
}
For Customizations
- You can replace the given url of the image in the code and add your own.
