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?

Arleen

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

Hepsiba

You can also use a <div> instead of a <span> if you want. – Denishadenison

@nueverest div is block level, dont nest those imo – Brio

Why do I need the css to address li span with font normal? – Giliana

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/

Whall

How did I not know about CSS counters before this? That's sick (the good kind). – Agneta

This works beautifully. My only criticism is that you mean "list-style-type" not "list-type" :) Oh and that this doesn't work in IE7 and below, but hey, not much does. – Archenteron

Yes, that was a typo on my part. Thanks, I'll update the answer. – Whall

Not great if the content goes onto a second line in the list item, i.e. I assume most people would want the beginning of the second line to be aligned with the beginning of the first line – Misogynist

@MarkR21 see #10429220 – Whall

Great stuff. Never knew about CSS counters before – Landsturm

+1, This answer should be promoted in post 2013 era... similar question #21370343 – Crankcase

This solution does not work if the text gets longer (i.e. the lines need to wrap), see the updated Fiddle: jsfiddle.net/xpAMU/500 Here's a better way to do it: #21370343 – Panayiotis

Answer 3

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)

Blackwood

99% of browser fixes always involves adding extra mark up. Maybe one day this wont be the case – Alienist

Answer 4

I know this question is a little old, but it still comes up first in a lot of Google searches. I wanted to add in a solution that doesn't involve editing the style sheet (in my case, I didn't 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>

Slate

Answer 5

You could do something like this also:

ol {
  font-weight: bold;
}

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

So you have no "style" attributes in your HTML

Polybasite

Having tried several of the other approaches on this page and others, to simply make an OLs number bold I so far like this method the most; at least so far. Cleanest, least convoluted. Only thing I did was add a class to OL so I could turn the bolded OLs on or off as it were... – Schappe

Answer 6

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

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

Sessoms

Answer 7

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..

Sundries