html css styled ordered list with letters digits and numbers?

Question

We have an ordered list

<ol>
    <li>something good</li>
    <li>even better</li>
    <li>possibly the best</li>    
</ol>

Normally it would display as:

something good
even better
possibly the best

Is there any way to make it display as:

a1. something good

a2. even better

a3. possibly the best

And then the next list could be:

b1. bla bla bla

b2. a second list item

Thanks.. The general question is that I want a character and a symbol as well as a digit.

Community · Accepted Answer · 2017-05-23 10:34:26Z

2

Searching through this page I could find two answers that gave me the solution.

counter-increment in CSS

HTML list-style-type dash

Reusing one of the fiddles from those I created one that suits your needs:

http://jsfiddle.net/DDNEB/1/

For the list you need a:

ol {counter-reset: chapter 1; list-style: none;}

Which permits you create the variable. Then:

ol li+li {counter-increment: chapter 1; list-style: none;}

Will increment it for each li And finally:

ol li:before {content: "a" counter(chapter) ".";}

Content before will create the specified content, in this case a (change it with b or whatever) + number + . .

Hope it helps.

edited May 23, 2017 at 10:34

CommunityBot

11 silver badge

answered Jun 24, 2012 at 9:13

Alvaro

9,81210 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AturSams Over a year ago

Your answer is awesome too. :)

osyan · Accepted Answer · 2012-06-24 09:47:49Z

1

Add this to your CSS

.A li:before 
   {
    content: "A";
   }
.B li:before 
   {
    content: "B";
 }

And change your list to something like this:

<ol class="A">
    <li>something good</li>
    <li>even better</li>
    <li>possibly the best</li>    
</ol>
<ol class="B">
    <li>something good</li>
    <li>even better</li>
    <li>possibly the best</li>    
</ol>

edited Jun 24, 2012 at 9:47

answered Jun 24, 2012 at 9:18

osyan

1,8862 gold badges27 silver badges57 bronze badges

2 Comments

AturSams Over a year ago

Thanks, this happens to be exactly what I needed. :)

osyan Over a year ago

@ArthurWulfWhite I write new answer for you!

aqua · Accepted Answer · 2012-06-24 09:02:24Z

0

This is one way to do it... not quite what you want, but...

<ol type="a">
    <li>
        <ol type="1" start="1">
            <li>something good</li>
            <li>even better</li>
            <li>possibly the best</li>
        </ol>
    </li>
    <li>
        <ol type="1" start="1">
            <li>something good</li>
            <li>even better</li>
            <li>possibly the best</li>
        </ol>
    </li>
</ol>

answered Jun 24, 2012 at 9:02

aqua

3,41532 silver badges42 bronze badges

Comments

javascript is future · Accepted Answer · 2012-06-24 09:28:29Z

0

Try this: http://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-type_ex

answered Jun 24, 2012 at 9:28

javascript is future

8958 silver badges14 bronze badges

Comments

osyan · Accepted Answer · 2012-06-24 13:31:42Z

0

Add this to your CSS:

.A ol {list-style: none; counter-reset: chapter 1;}
.A ol li+li {counter-increment: chapter 1; list-style: none;}
.A ol li:before {content: "a" counter(chapter) ". ";}


.B ol {list-style: none; counter-reset: chapter 1;}
.B ol li+li {counter-increment: chapter 1; list-style: none;}
.B ol li:before {content: "b" counter(chapter) ". ";}

AND Do like this:

<div class="A">
    <ol>
        <li>something good</li>
        <li>even better</li>
        <li>possibly the best</li>             
    <ol>
</div>
<div class="B">
    <ol>
        <li>something good</li>
        <li>even better</li>
        <li>possibly the best</li>           
    <ol>
</div>

Click here! This works as well.

answered Jun 24, 2012 at 13:31

osyan

1,8862 gold badges27 silver badges57 bronze badges

Collectives™ on Stack Overflow

html css styled ordered list with letters digits and numbers?

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related