Make ABC Ordered List Items Have Bold Style

user_51 0
Viewed 133455

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?

html-lists css html
7 Answers

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; }
peirix_592420

Are you sure you correctly applied the styles, or that there isn't another stylesheet interfering 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 it bolded the A, B, C etc and not the text.

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

Perspx_752450

Another even shorter solution is to make use of li::marker now widely supported. Like so:

ol li::marker {
        font-weight: bold;
}
user_140960420

You could do something like this also:

<ol type="A" style="font-weight: bold;">

<li style="padding-bottom: 8px;">****</li>

It is simple code for the beginners.

This code is been tested in "Mozilla, chrome and edge..

user_92337760
Related