Geek Answers Handbook

Custom list styles for ordered lists?

Probably the obvious beginner question: I'm looking for an easy way to create standard ordered HTML lists without any tags, such as 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" can custom styles for levels from five to nine be achieved only with CSS counters?

+8
html css
source share
1 answer

You can achieve this with CSS using 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 lead to:

 aa. foo bb. bar cc. baz

I understand that these are not the most elegant solutions, but this is the only way I know this.

+7
source share

More articles:


All Articles