5 Awesome Styles for Ordered List

Styling ordered lists was always a tricky task and I guess am not the only one who thinks that. Thankfully it's also not impossible. Recently, I came across a tutorial written by Roger Johansson which explain how we can use the :before pseudo element to style our ordered lists.

Styled numbers will only be visible in CSS3 supported browsers, but fallback (list-style-type: decimal !ie;) is provided so that default unstyled numbers are displayed in old browsers.

The idea is simple, we disable the default numbering with list-style: none; then we use counter-reset and counter-increment to create a counting scope and increment the count. The :before pseudo-element is used to give the numbering styles and content: inserts the index of the created counter.

Note: The numbering don't have to be numbers or alphabet only. To use upper-roman numerals change the content rule to content: counter(ol-counter, upper-roman);

disc (• • •)
circle (○ ○ ○)
square (▪ ▪ ▪)
decimal (1 2 3)
decimal-leading-zero (01, 02, 03)
lower-roman (i ii iii)
upper-roman (I II III)
lower-greek (α β γ)
lower-latin (a b c)
upper-latin (A B C)
armenian (Ա Բ Գ)
georgian (ა ბ გ)
lower-alpha (a b c)
upper-alpha (A B C)

You might also want to reverse the ordering of an ordered list using CSS. Just reset the increment counter to one more than the number of elements in the list. Then when we increment a list-item we increment by negative 1, like so:

ol.box-list {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/
    margin: 0;
    margin-left: 3em;
    padding: 0;
    counter-reset: reverse 4;
}
ol.box-list > li{
    background-color: #f0f0f0;
    border-top: 3px solid #464646;
    padding: 1em;
    position: relative;
    margin-bottom: 15px;
}
ol.box-list > li:before {
    background-color: #464646;
    color: #f2f2f2; padding: 2px 4px;
    font-size: 2.5em;
    font-weight: bold;
    left: -1.2em;
    height: 0.94em;
    line-height: 0.95;
    padding: 5px;
    position: absolute;
    text-align: center;
    top: -3px;
    width: 0.95em;
    content: counter(reverse);
    counter-increment: reverse -1;
}

If you study the example above, you will notice that i made three changes, I set the counter-reset to 4 (i.e the total number of the list +1), changed the content: counter to reverse and counter-increment to -1. This are what you should mindful of when reversing any list items.

With the technique explained above, I have created a dead stylish ordered list you can use in your next project. Enjoy!


Box

ol.box-list {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/
    margin: 0;
    margin-left: 3em;
    padding: 0;
    counter-reset: li-counter;
}
ol.box-list > li{
    background-color: #f0f0f0;
    border-top: 3px solid #464646;
    padding: 1em;
    position: relative;
    margin-bottom: 15px;
}
ol.box-list > li:before {
    background-color: #464646;
    color: #f2f2f2; padding: 2px 4px;
    font-size: 2.5em;
    font-weight: bold;
    left: -1.2em;
    height: 0.94em;
    line-height: 0.95;
    padding: 5px;
    position: absolute;
    text-align: center;
    top: -3px;
    width: 0.95em;
    content: counter(li-counter);
    counter-increment: li-counter;
}

Tilted

ol.tilted-list {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/
    margin: 0;
    margin-left: 3em;
    padding: 0;
    counter-reset: li-counter;
}
ol.tilted-list > li{
    background-color: #f6f3ef;
    border-left: 2px solid #bca585;
                   color: #724300;
    margin-bottom: 10px;
    padding: 1em;
    position: relative;
}
ol.tilted-list > li:before {
    color: #4c2d00;
    font-family: Arial Rounded MT Bold;
    font-size: 3.5em;
    font-weight: bold;
    left: -0.95em;
    line-height: 1;
    overflow: hidden;
    position: absolute;
    text-align: right;
    top: 0;
    width: 1em;
    z-index: -99;
    transform: rotate(-25deg);
           -moz-transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
           -o-transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
    content: counter(li-counter);
    counter-increment: li-counter;
}

Label

ol.label-list {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/   
    margin: 0;
    margin-left: 3em;
    margin-top: 2em;
    padding: 0;
    counter-reset: li-counter;
}
ol.label-list > li{
    position: relative;
    margin-bottom: 1.5em;
    padding: 1.5em;
    background-color: #f9f9f9;
    border: 2px dotted #cccccc;
    font-style: italic;
    font-size: 15px;
}
ol.label-list > li:before {
    background-color: #f8f8f8;
    border: 2px solid #cccccc;
    color: #464646;
    font-size: 2.3em;
    font-style: normal;
    font-weight: bold;
    height: 1em;
    left: -0.5em;
    line-height: 1em;
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: -0.3em;
    width: 1.6em;
    z-index: 99;
    transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);   
    content: counter(li-counter, upper-alpha);
    counter-increment: li-counter;
}

Circle

ol.circle-list {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/
    margin: 0;
    margin-left: 3em;
    margin-top: 1em;
    padding: 0;
    counter-reset: li-counter;
}
ol.circle-list > li{
    color: #3f3f3f;
    margin-bottom: 20px;
    min-height: 3em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    position: relative;
}
ol.circle-list > li:before {
    background-color: #3f3f3f;
    border: 3px solid #c5c5c5;
    border-radius: 50%;
    color: #f2f2f2; padding: 2px 4px;
    font-size: 1.5em;
    font-weight: bold;
    height: 1em;
    left: -1.5em;
    line-height: 1em;
                   padding: 5px;
    position: absolute;
    text-align: center;
    top: -10px;
    width: 1em;
    content: counter(li-counter, lower-roman);
    counter-increment: li-counter;
}

Ribbon

ol.ribbon-list {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/
    margin: 0;
    margin-left: 1em;
    padding: 0;
    counter-reset: li-counter;
}
ol.ribbon-list > li{
    background-color: #f2f2f2; padding: 2px 4px;
    margin-bottom: 10px;
    padding: 1.5em 2em;
    position: relative;
}
ol.ribbon-list > li:before {
    background:#515151;
    color:#f2f2f2; padding: 2px 4px;
    font-family: Playbill;
    font-size: 30px;
    display:block;
    left:-5px;
    margin:0 0 10px 0;
    padding:4px 4px 4px 3px;
    position:absolute;
    text-align:center;
    text-indent:2px;
    top:-5px;
    width:25px;
    content: counter(li-counter);
    counter-increment: li-counter;
}
ol.ribbon-list > li:after{
    border-left:7px solid #262626;
    border-top:7px outset transparent;
    content:"";
    height: 0px;
    left:27px;
    position:absolute;
    top:-5px;
    width: 0px;
}

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz