Text Shadows on counter or bullet in list

Question

I want to know how to add text-shadow to an ordered list </ol>. I've tried, the following example but it doesn't work.

body {
  text-shadow: black 0.1em 0.1em 0.2em;
  color: gray;
  background: white;
}

ol {
  text-shadow: black 0.1em 0.1em 0.2em;
}

Ordered Lists
<ol>
  <li>content</li>
  <li>content</li>
  <li>content</li>
</ol>

My issue it tahe the list counter doesn't have the text shadow. I need to add text shadow to the number in the ordered list, like the 1. , or 2. , etc.

By the way, I want it to still retain like a list style where the content is indented before the number.

Answer 1

If you also want to set the text-shadow on the counter/bullet, you need to put the counter/bullet in the :before pseudo element so that the counter/bullet can have a text-shadow like the rest of the text.

To keep the position of the counter you can set position:absolute; to the pseudo element and position it outside the li on the left with right:100%;.

body {
    text-shadow: .1em 0.1em 0.2em;
}
ol {
    counter-reset: li;
    list-style-type: none;
}
ol li{
    position:relative;
}
ol li:before{
    content: counter(li)'.';
    counter-increment: li;
    position:absolute;
    right:100%;
    margin-right:0.5em;
}

Ordered Lists
<ol>
    <li>content</li>
    <li>content</li>
    <li>content</li>
</ol>

Answer 2

For custom styles on the list decoration themselves you probably need to either fake them or use custom images (or both).

This looks semi-helpful but doesn't have different values per item.

Custom bullet symbol for <li> elements in <ul> that is a regular character, and not an image

If you know how many items you are going to have as a maximum you could create a custom rule for each n-th child of the ul.