Styling list markers

If you're looking to incorporate a numbered list in a site it's likely you'll be using an ordered list <ol> and it's not unlikely you'll be looking to style the numerals generated.

While not as straight forward as you might assume, it can be done.

Roger Johansson's tutorial shows it can be done with the <:before> pseudo element, which can have a <counter> as a value to the <content> property.

ol {  
    counter-reset: my-counter;
    list-style-type: none;

}
ol li:before {  
    content: counter(my-counter);
    counter-increment: my-counter;
}

Though feeling a little like a hack, it seems this may be the best solution for now. I believe browser support for targeting list markers with CSS3 is still lacking at time of writing.

/* No browser support at time of writing */

li::marker {  
  width: 10px;
  margin-right: 10px;
  display: inline-block;
}

ol {  
  list-style: symbols("*" "\2020" "\2021" "\A7"); 
}

ul {  
  list-style-type: "★"; 
}
Show Comments