CODEWITHSUNDEEP
htmlcsstwitter-bootstraphtml-lists
wonghenry
wonghenry

Reputation: 689

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

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:

  1. Coffee
  2. Tea
  3. Milk

Upvotes: 5

Views: 1963

Answers (3)

Richard Hamilton
Richard Hamilton

Reputation: 26444

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

Upvotes: 8

Michael Benjamin
Michael Benjamin

Reputation: 371619

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:

Upvotes: 4

alberjoe
alberjoe

Reputation: 88

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>

Upvotes: 2

Related Questions