CSS3 Bullets

If you want bullets other than the regular ones provided by HTML, you could implement bullets based off of images. However, let’s say you decide to change your website’s color scheme. In this case, you would need to re-edit the image. I like using CSS because there’s a lot you can do by simply editing a few lines of text. This same concept can be applied to bullets as well. You can see an example of this in my Category widget to the right, as well as below.

  • Item 1
  • Item 2
  • Item 3
#bullet-test ul {
margin: 12px 12px 12px 0px;
padding: 0;
#bullet-test ul li {
margin: 0 0 12px 0;
font-size: .9em;
line-height: 1em;
body:nth-of-type(1) #bullet-test ul li {
padding: 0 0 0 40px;
body:nth-of-type(1) #bullet-test ul li:before{
/*fill it with a check mark*/
font-size: 0.9em;
line-height: 0.9em;
color: snow;
background: rgb(106,173,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(106,173,232,1) 0%, rgba(30,105,222,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(106,173,232,1)), color-stop(100%,rgba(30,105,222,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(106,173,232,1) 0%,rgba(30,105,222,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(106,173,232,1) 0%,rgba(30,105,222,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(106,173,232,1) 0%,rgba(30,105,222,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(106,173,232,1) 0%,rgba(30,105,222,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6aade8', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */
padding: 4px;
/*make it a block element*/
display: block;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
/*Now position it on the left of the list item, and center it vertically
(so that it will work with multiple line list-items)*/
position: absolute;
left: 7px;
top: 40%;
margin-top: -8px;

See webitect.net