How to style markers in an ordered list that uses start attribute?

Question

How do you add styles to the HTML "start" attribute?

I am unable to target the number even if I apply styles to the entire ordered list tag.

//CODE:
<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

OUTPUT:

50. Coffee
51. Tea
52. Milk

Undersea

Possible duplicate of <ol> with numbers another color – Simply

Hey Mr Lister, it's not a duplicate since this question is specific to the "start" attribute. – Undersea

I'm not sure what you mean. In what way is your question different from a question where the list starts with 1? – Simply

Answer 1

You can use the counter-reset and counter-increment properties for this. You have to use the :before pseudo element on the list items though.

Here is an example.

First you have to start the counter. You can do that with the counter-reset property.

ol {
  counter-reset: item 49;
  list-style: none;
}

The syntax for counter-reset is as follows

counter-reset: none|name number|initial|inherit;

Here we're giving the name, followed by the number you want to start after. Since it starts at 0 by default, you want to choose 49 and not 50.

We can finally begin styling our numbers to make it look pretty. We do this with the :before pseudo-element. In the content property, we can include the value of our counter, which we defined with the counter-reset property above.

li:before {
   margin-right: 10px;                           // Gives us breathing room after number
   padding: 3px;
   content: counter(item);
   background: lightblue;
   border-radius: 100%;                          // Gives circle shape
   color: white;
   width: 1.2em;                            
   text-align: center;
   display: inline-block;
 }

 ol {
   counter-reset: item 49;
   list-style: none;
 }
 li {
   counter-increment: item;
   margin-bottom: 5px;
 }
 li:before {
   margin-right: 10px;
   padding: 3px;
   content: counter(item);
   background: lightblue;
   border-radius: 100%;
   color: white;
   width: 1.2em;
   text-align: center;
   display: inline-block;
 }

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

It should also be noted that counter-reset and counter-increment only work on IE8 or higher.

https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment

Autotoxin

Answer 2

For anybody seeing this question in 2025:

The ::marker pseudo-element

This specification defines a new type of pseudo-element, the ::marker pseudo-element, which is generated by list items to represent the item’s marker (the bullet or number identifying each item).

This pseudo-element can be styled like a real element and would satisfy the requirements in the question. Unfortunately, it currently enjoys zero browser support.

More info:

• W3C Working Draft
• Do any browsers support the CSS3 pseudo-element "marker"?
• CSS-Tricks: ::marker

Creole

That was actually a proposition that didn't make it, so I'm not too sure it will resurface in a few years. – Simply

@MrLister, didn't make it or hasn't made it? It's still in the W3C draft. Is there anything saying it's been permanently dropped from consideration? – Creole

Answer 3

I think you could use some element like <span> to separate number style and list item style, something like this:

<style>
    ol > li { color: #00F; }
    ol > li > span { color: #000; }
</style>

<ol start="50">
  <li><span>Coffee</span></li>
  <li><span>Tea</span></li>
  <li><span>Milk</span></li>
</ol>

Drome