Custom ordered bullet using :before and CSS counter.

This demo demonstrates how to customize the ordered bullets. You can set the list-style to none and style the :before pseudo-element with the content got from CSS counter (which will hep us number the list items correctly).

by viphalongpro

HTML

<ol class="custom-bullet">
   <li>Step One</li>
   <li>Step Two</li>
   <li>Step Three</li>
</ol>

CSS

ol.custom-bullet {
    list-style: none;
}
ol.custom-bullet > li {
    vertical-align:middle;
    margin-bottom:10px;
}
ol.custom-bullet > li:first-child {
    counter-reset:index;
}
ol.custom-bullet > li:before {
    content: counter(index);
    counter-increment:index;
    width:30px;
    height:30px;
    border-radius:50%;
    background:radial-gradient(at 30% 30%, white, green 60%);    
    display:inline-block;
    vertical-align:middle;
    margin-right:5px;
    text-align:center;
    color:orange;
    font-size: 18px;
    line-height:28px;
    text-shadow:1px 1px 1px white, -1px -1px 1px black;
}

JavaScript

//NOTE: There is an interesting effect in this demo. As you can see the numbers seem to be sunk down (inset). But it's not simply the effect of the text-shadow, in fact the text-shadow itself makes the numbers seem to raise up, however by also applying a gradient background correctly (so that it looks like there is a light from a direction) we can see the numbers seem to be sunk down expectedly. Great!.