Make ABC Ordered List Items Have Bold Style

Question

I have an html Ordered list with type set to "A"

<ol type="A">...</ol> 

Thus, each list item will start with A, B, C, etc.

I would like to style the A, B, C letters to be bold. I have tried setting font-weight:bold; via css, but it didn't work. Any suggestions on how to do this?

Answer 1

a bit of a cheat, but it works:

HTML:

<ol type="A" style="font-weight: bold;">   <li><span>Text</span></li>   <li><span>More text</span></li> </ol> 

CSS:

li span { font-weight: normal; } 

Answer 2

As an alternative and superior solution, you could use a custom counter in a before element. It involves no extra HTML markup. A CSS reset should be used alongside it, or at least styling removed from the ol element (list-style-type: none, reset margin), otherwise the element will have two counters.

<ol>     <li>First line</li>     <li>Second line</li> </ol> 

CSS:

ol {     counter-reset: my-badass-counter; } ol li:before {     content: counter(my-badass-counter, upper-alpha);     counter-increment: my-badass-counter;     margin-right: 5px;     font-weight: bold; } 

An example: http://jsfiddle.net/xpAMU/1/