Best IT Recipes

Is there a way to make the numbers in an ordered list in bold?

Is there any CSS selector for attaching some style to the numerical part of just an ordered list?

I have HTML like:

<ol> <li>a</li> <li>b</li> <li>c</li> </ol>

What should be output:

 1.a 2.b 3.c

I need to make 1., 2. and 3. bold , leaving a, b, c regular.

I am aware of the <span> ...

+53
css html-lists
Jan 26 '14 at 22:00
source share
11 answers

Counter-increment

CSS

 ol { margin: 0 0 1.5em; padding: 0; counter-reset: item; } ol > li { margin: 0; padding: 0 0 0 2em; text-indent: -2em; list-style-type: none; counter-increment: item; } ol > li:before { display: inline-block; width: 1em; padding-right: 0.5em; font-weight: bold; text-align: right; content: counter(item) "."; }

Demo

+86
Jan 26 '14 at 22:08
source share
— -

About a year later, but since it may also be interesting for others coming here in the future:

Another simple possibility is to wrap the contents of the list item in <p> , the <li> style as bold, and <p> as usual. It would also be preferable from the point of view of IA, especially when <li> may contain sub-lists (to avoid mixing text nodes with block-level elements).

Full example for your convenience:

 <html> <head> <title>Ordered list items with bold numbers</title> <style> ol li { font-weight:bold; } li > p { font-weight:normal; } </style> </head> <body> <ol> <li> <p>List Item 1</p> </li> <li> <p>Liste Item 2</p> <ol> <li> <p>Sub List Item 1</p> </li> <li> <p>Sub List Item 2</p> </li> </ol> </li> <li> <p>List Item 3.</p> </li> </ol> </body> </html>

If you prefer a more general approach (which will also cover other scenarios like <li> with descendants other than <p> , you can use li > * instead of li > p :

 <html> <head> <title>Ordered list items with bold numbers</title> <style> ol li { font-weight:bold; } li > * { font-weight:normal; } </style> </head> <body> <ol> <li> <p>List Item 1</p> </li> <li> <p>Liste Item 2</p> <ol> <li> <p>Sub List Item 1</p> </li> <li> <p>Sub List Item 2</p> </li> </ol> </li> <li> <p>List Item 3.</p> </li> <li> <code>List Item 4.</code> </li> </ol> </body> </html>

(Check here for list item 4, which is ol / li / code, not ol / li / p / code here. Just make sure you use the li > * selector, not li * , if you want descendants of the block level styles were regular, but were also not lines like "foo <strong> bold word </strong> foo."

+23
Dec 08 '14 at 2:44
source share

JSFiddle:

 ol { counter-reset: item; } ol li { display: block } ol li:before { content: counter(item) ". "; counter-increment: item; font-weight: bold; }
+19
Jan 26 '14 at 22:03
source share

I had a similar problem when writing a newsletter. so I had to embed the style like this:

 <ol> <li style="font-weight:bold"><span style="font-weight:normal">something</span></li> <li style="font-weight:bold"><span style="font-weight:normal">something</span></li> <li style="font-weight:bold"><span style="font-weight:normal">something</span></li> </ol>
+14
Jul 27 '16 at 10:10
source share

This is an update for dcodesmith's answer https://stackoverflow.com/a/4646268

The proposed solution also works when the text is longer (i.e. the lines need to be wrapped): Updated Fiddle

When you use a grid, you may need to do one of the following (at least this is true for Foundation 6 — it could not be reproduced in Fiddle):

  • Add box-sizing:content-box; to the list or its container
  • OR change text-indent:-2em; at -1.5em

PS: I wanted to add this as editing the original answer, but it was rejected.

+3
Feb 16 '16 at 16:49
source share

If you are using Bootstrap 4:

 <ol class="font-weight-bold"> <li><span class="font-weight-light">Curabitur aliquet quam id dui posuere blandit.</span></li> <li><span class="font-weight-light">Curabitur aliquet quam id dui posuere blandit.</span></li> </ol>
+3
Oct 27 '17 at 8:00
source share

The previous answer has a side effect that turns all types of lists into numeric ones. <ol type="a"> will show 1. 2. 3. 4. instead of abcd

 ol { margin: 0 0 1.5em; padding: 0; counter-reset: item; } ol > li { margin: 0; padding: 0 0 0 2em; text-indent: -2em; list-style-type: none; counter-increment: item; } ol > li:before { display: inline-block; width: 1em; padding-right: 0.5em; font-weight: bold; text-align: right; content: counter(item) "."; } /* Add support for non-numeric lists */ ol[type="a"] > li:before { content: counter(item, lower-alpha) "."; } ol[type="i"] > li:before { content: counter(item, lower-roman) "."; }

The above code adds support for lowercase letters, lowercase Roman numerals. When writing a browser, browsers do not distinguish between upper and lower case type selectors, so you can only select upper or lower case for your alternative types.

+2
Jul 12 '18 at 20:37
source share

A new pseudo-element selector ::marker added to the CSS 4a pseudo-element level , which simplifies the selection of list element numbers in bold, for example

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

Unfortunately, it is currently only supported by Firefox 68 and higher . (See Chrome Bug 457718 for Chrome / Blink status.)

+1
Aug 26 '19 at 15:29
source share

I know this is old, but there is a “quick and dirty” way not to use <li> :

 <!-- <ul> is used for indentation only --> <ul> <p> <b>1.</b> item text </p> <p> <b>2.</b> item text </p> </ul>
0
Jun 07 '19 at 10:44 on
source share

You can also put around a, b, c and then highlight ul in css.

Example

 ul { font-weight:bold; } <ul><li><span style="font-weight:normal">a</span></li></ul>
0
Aug 05 '19 at 5:11
source share

Pretty late answer, but hopefully someone finds this useful

I had this situation:

  1. List item

    but. List item

If the first element was <strong> , then the subelement was normal weight and "1". just won't be bold.

My solution was through jQuery:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { if ($('ol').has('li').has('strong')) { $('ol ').css('font-weight', 'bold'); $('ol > li > ol').css('font-weight', 'normal'); } }); </script>

Hope this helps someone!

-one
Jun 26 '19 at 5:34
source share


More articles:


All Articles