CODEWITHSUNDEEP
htmlcss
Elip
Elip

Reputation: 551

Custom list styles for ordered lists?

Probably an obvious beginner question: I'm looking for an easy way to style standard HTML ordered lists without any tags like the following hierarchy: 

A. One
    I. Two
        1. Three 
            a. Four
                aa. Five
                    (I.) Six
                        (1.) Seven 
                            (a.) Eight
                                (aa.) Nine

Is there a CSS solution for this? According to my "research" the custom stylings for levels Five to Nine can only be achieved with CSS counters?

Upvotes: 8

Views: 4481

Answers (1)

Khan
Khan

Reputation: 18142

You can achieve this through CSS with use of list-style-type. Apply a custom class to each level of the hierarchy.

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

Taken from: http://www.w3schools.com/css/css_list.asp

You can specify custom text by doing this for example:

CSS:

ul.custom
 {
  list-style-type: none;
  padding: 0;
}

ul.custom li.aa:before { content: "aa. "; }
ul.custom li.bb:before { content: "bb. "; }
ul.custom li.cc:before { content: "cc. "; }

HTML:

<ul class="custom">
    <li class="aa">foo</li>
    <li class="bb">bar</li>
    <li class="cc">baz</li>
</ul>

This will result in:

aa. foo
bb. bar
cc. baz

I understand that this isn't the most elegant of solutions, but it is the only way I know of to do it.

Upvotes: 7

Related Questions