Make ABC Ordered List Items Have Bold Style
HtmlCssHtml ListsHtml Problem Overview
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 Solutions
Solution 1 - Html
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; }
Solution 2 - Html
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/
Solution 3 - Html
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)
Solution 4 - Html
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>
Solution 5 - Html
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
Solution 6 - Html
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..
Solution 7 - Html
Another even shorter solution is to make use of li::marker
now widely supported.
Like so:
ol li::marker {
font-weight: bold;
}