Make ABC Order List Items Have A Bold Style

Question

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

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

Thus, each item in the list starts with A, B, C, etc.

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

Answer 1

a little cheating, 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 excellent solution, you can use your own counter in the before element. This does not require additional HTML markup. Next to it, you should use CSS reset, or at least the 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; } 

Example: http://jsfiddle.net/xpAMU/1/

Answer 3

Are you sure that you applied the styles correctly or that there is no other stylesheet that interferes with your lists? I tried this:

 <ol type="A"> <li><span class="label">Text</span></li> <li><span class="label">Text</span></li> <li><span class="label">Text</span></li> </ol> 

Then in the stylesheet:

 ol {font-weight: bold;} ol li span.label {font-weight:normal;} 

And he highlighted A , B , C , etc., not text.

(Tested in Opera 9.6, FF 3, Safari 3.2, and IE 7)

Answer 4

I know this question is a little old, but it still appears on many Google search engines. I wanted to add to a solution that is not related to editing a stylesheet (in my case, I did not have access):

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

Answer 5

You can do something like this:

 ol { font-weight: bold; } ol > li > * { font-weight: normal; } 

This way you don't have the "style" attributes in your HTML