A styled ordered list whose nested list should have numbers with letters using CSS counter property

Question

I want to add a letter to an

-element from a my under

like from my question:

Answer 1

Sure, you can do anything that the

can do.

ol.numbered_style.start_3{
  counter-reset: item2; 
}

ol.numbered_style.start_3 li:before {
    counter-increment:item2;
    content:counter(item2, upper-latin);
}/* List Style Type========^----------^*/

Counter List Style Types

• decimal ------------------------------- 1, 2, 3, ...

• decimal-leading-zero -------------- 01, 02, 03, ... 09, 10, 11, ...

• lower-alpha, lower-latin ----------- a, b, c, ... z, aa, ab, ...

• upper-alpha, upper-latin ---------- A, B, C, ... Z, AA, AB, ...

• lower-roman ------------------------ i, ii, iii, iv, v, vi, ...

• upper-roman ------------------------ I, II, III, IV, V, VI, ...

• asterisks ----------------------------- *, **, ***,...

REFERENCE

http://www.princexml.com/doc/5.1/counters/

SNIPPET

body { counter-reset: item; }

ol.numbered_style li:before
{
    counter-increment:item;
    margin-bottom:5px;
    margin-right:10px;
    content:counter(item, upper-roman);
    background:blue;
    border-radius:100%;
    color:white;
    width:1.2em;
    text-align:center;
    display:inline-block;
}
ol.numbered_style.start_3{
  counter-reset: item2; 
}

ol.numbered_style.start_3 li:before {

    counter-increment:item2;
    margin-bottom:5px;
    margin-right:10px;
    content:"3"counter(item2, upper-latin);
    background:blue;
    border-radius:100%;
    color:white;
    width:1.2em;
    text-align:center;
    display:inline-block;
}
  
ol.none, ul.none,ol.numbered_style { list-style: none; }

	
first
	
second
	
third  Lorem Ipsum
		

			
missing an a after the number
			
missing an b after the number
			
missing an c after the number