-1

How would I go about styling a list marker? Such as making it a different color, make it bold, change size etc. Is it possible to style it the same way I would style a font?

For example.

  1. This is a list item.

Can I target the "1." specifically without effecting the rest of the text?

I know there are ways to change the type, such as make it roman-lower, or make it square or whatever using list-style-type, but these don't seem to have the styling options I'm looking for.

PaulH
  • 3
  • 3
  • Related - http://stackoverflow.com/questions/1470214/change-bullets-color-of-an-html-list-without-using-span?lq=1 – Paulie_D Feb 11 '16 at 22:26

1 Answers1

1

In order to achieve the styling in ordered list items you need to use pseudo elements along with a counter, likewise.

ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: my-counter;
}

ol li {
  position: relative;
  padding-left: 10px;
  counter-increment: my-counter;
}

ol li:before {
  content: counter(my-counter);
  display: inline-block;
  vertical-align: middle;
  color: red;
  margin-right: 10px;
}
<ol>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ol>
YakovL
  • 7,557
  • 12
  • 62
  • 102
Giorgos
  • 94
  • 3
  • Ah, thanks Giorgos. I had to make some adjustments to make it fit my style but this worked great. Finally wrapping my head around custom list style. I had to add this because I also had nested unordered lists. (how do I display html code here, sorry, I'm new) – PaulH Feb 12 '16 at 18:39