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

Asked 26/1, 2014 at 22:0 Answered 26/8, 2019 at 15:29

105

Is there any CSS selector to attach some style to the numerical part of an ordered list only?

I have HTML like:

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

Which should output:

1.a
2.b
3.c

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

I am aware of the  workaround...

Pamper answered 26/1, 2014 at 22:0 Comment(3)

possible duplicate of Make ABC Ordered List Items Have Bold Style – Maldon 26/1, 2014 at 22:13

just use a counter-reset and list-style-type: none codepen.io/gc-nomade/pen/fdbEm – Machos 26/1, 2014 at 22:15

ol > li::marker { font-weight: bold; } solution provided below is the best answer for this question please upvote – Abert 7/11, 2021 at 15:47

111

A new ::marker pseudo-element selector has been added to CSS Pseudo-Elements Level 4, which makes styling list item numbers in bold as simple as

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

It is currently supported by Firefox 68+, Chrome/Edge 86+, and Safari 11.1+.

Salsala answered 26/8, 2019 at 15:29 Comment(5)

Best solution in 2021. This answer is be far more preferable than the others above – Tetrahedron 12/5, 2021 at 11:42

best solution for this question but not rated above please vote and support – Abert 7/11, 2021 at 15:46

This should now be the accepted answer. Earlier answers are just clever hacks. – Pronto 11/5, 2022 at 22:41

Accepted as the answer for 2022. Thanks. – Pamper 28/9, 2022 at 7:53

Superb. Progressive enhancement all the way. Had previously put in the earlier hacks, but then needed to account for the indenting as well - this way just allows the li to flow as it would naturally. – Pentateuch 20/2, 2023 at 19:19

115

using The Counter-increment CSS property

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:1.5em;
  padding-right:0.5em;
  font-weight:bold;
  text-align:right;
  content:counter(item) ".";
}

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

Tamaru answered 26/1, 2014 at 22:8 Comment(6)

If your LIs contain Ps or other block level elements, you need to also undo the text-indent, like so... ` ol > li * { text-indent: 0; } ` edit: sorry it looks like code formatting is broken in comments. – Incapacious 22/12, 2014 at 3:49

Thanks for adding the text-indent too! This solution was perfect! – Pinero 26/8, 2015 at 14:26

When adding this custom css here: hlbenefits.com/best-vegan-vegetarian-protein-sources-2016 I get a strange result when numbering becomes 1.1. | 2.1. | 3.1. | and so on. The second (1) gets bold. So basically it adds another numbering without counting. Can anyone tell me why is this happening? – Clegg 7/9, 2016 at 10:11

@Clegg Set list-style-type to none to get rid of the first (native) number. Also, the approach suggested in this answer is clever, but makes it difficult to left-align the text properly if the li line-breaks. – Coffeepot 6/10, 2016 at 13:39

This doesn't respect lists with a specified li type="a", type="i", etc. If you have a list with alpha order and one item has a nested list with roman order, all of them become decimal numbers. – Kumler 19/10, 2017 at 15:16

@stefan-gentz's answer was easier for me to implement with deep lists and different list types throughout (A,1,a) – Lardon 29/5, 2018 at 21:0

111

A new ::marker pseudo-element selector has been added to CSS Pseudo-Elements Level 4, which makes styling list item numbers in bold as simple as

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

It is currently supported by Firefox 68+, Chrome/Edge 86+, and Safari 11.1+.

Salsala answered 26/8, 2019 at 15:29 Comment(5)

Best solution in 2021. This answer is be far more preferable than the others above – Tetrahedron 12/5, 2021 at 11:42

best solution for this question but not rated above please vote and support – Abert 7/11, 2021 at 15:46

This should now be the accepted answer. Earlier answers are just clever hacks. – Pronto 11/5, 2022 at 22:41

Accepted as the answer for 2022. Thanks. – Pamper 28/9, 2022 at 7:53

Another easy possibility would be to wrap the list item content into a , style the <li> as bold and the  as regular. This would be also preferable from an IA point of view, especially when <li>s can 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 generic approach (that would also cover other scenarios like <li>s with descendants other than , you might want to 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 the list item 4 here which is ol/li/code and not ol/li/p/code here.)

Just make sure to use the selector li > * and not li *, if you only want to style block level descendants as regular, but not also inlines like "foo bold word foo."

Infinitude answered 8/12, 2014 at 14:44 Comment(6)

This is a lighter and better approach than the two approaches listed above. If you want this in a master CSS file but you do not want this to be app-wide, use classes instead (i.e., ol -> class-name-1, li -> class-name-2). – Wortham 18/1, 2018 at 18:57

Brilliant! This should even be the accepted answer. And with the following additional code you can normalize the nested lists without the need for s in them: .listClassName li {font-weight: bold;} .listClassName li > *, .listClassName li > * > * {font-weight: normal;} – Lidless 7/2, 2018 at 18:12

While less generally flexible, this is a much more direct answer to the originally proposed question. – Capo 4/9, 2020 at 4:6

What is "IA"? – Pedestrianism 7/12, 2020 at 9:37

@peter-mortensen: IA = Information Architecture – Infinitude 14/12, 2020 at 18:19

A much better answer in my opinion than the accepted answer - simple to implement, thanks! – Whitecollar 12/6, 2021 at 8:19

JSFiddle:

ol {
    counter-reset: item;
}
ol li { display: block }

ol li:before {
    content: counter(item) ". ";
    counter-increment: item;
    font-weight: bold;
}

Routh answered 26/1, 2014 at 22:3 Comment(0)

I had a similar issue while writing a newsletter. So I had to inline the style this way:

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

Funda answered 27/7, 2016 at 10:10 Comment(2)

The only solution that also works in emails (in all email templates, as we cannot provide css there) – Keg 14/7, 2018 at 11:44

Works for email. Genius. It's one of those "omg it's so simple that I'm stupid for not thinking of that" solutions. Great job dude. – Zinkenite 12/2, 2021 at 3:46

Answer https://mcmap.net/q/203984/-is-there-a-way-to-make-numbers-in-an-ordered-list-bold from dcodesmith has a side effect that turns all types of lists numeric. <ol type="a"> will show 1. 2. 3. 4. rather than a. b. c. d.

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. At the time of writing browsers do not differentiate between upper and lower case selectors for type so you can only pick uppercase or lowercase for your alternate ol types I guess.

Jackleg answered 12/7, 2018 at 20:37 Comment(1)

There is more than one previous answer. Do you mean all of them or one in particular? Please respond by editing your answer (but without "Edit:", "Update:", or similar). – Pedestrianism 7/12, 2020 at 9:42

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>

Outstrip answered 27/10, 2017 at 8:0 Comment(1)

It sounds very simple. I will try install Bootstrap 4 to try it. – Cruelty 14/5, 2018 at 17:8

This is an update for dcodesmith's answer https://mcmap.net/q/203984/-is-there-a-way-to-make-numbers-in-an-ordered-list-bold

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

When you're using a grid system, you might need to do one of the following (at least this is true for Foundation 6 - couldn't reproduce it in the Fiddle):

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

P.S.: I wanted to add this as an edit to the original answer, but it was rejected.

Lefkowitz answered 16/2, 2016 at 16:49 Comment(0)

You also could put around a,b,c and then bold the ul in the CSS.

Example

ul {
    font-weight: bold;
}

<ul><li><span style="font-weight:normal">a</span></li></ul>

Selfdeceit answered 5/8, 2019 at 5:11 Comment(0)

-1

Pretty late answer, but hopefully someone will find this useful

I had a situation like this:

List item

a. List item

Where the first item was , the sub-element was normal weight and the '1.' just wouldn't bold.

My solution was via 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>

Hopefully this helps someone!

Perk answered 26/6, 2019 at 5:34 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Example

Recommended topics

Hot tags