Text shadows on the counter or stamp in the list.

Question

I want to know how to add text-shadow to an ordered list </ol> . I tried the following example, but it does not 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>

Run code

My problem is that the list counter has no shadow of text . I need to add a text shadow to a number in an ordered list, like 1. or 2. etc.

By the way, I want it to still be saved as a list style, where the contents are indented before the number.

Answer 1

/, / - :before, / text-shadow, .

, position:absolute; li 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

, , , ( ).

, .

<li> <ul> ,

, , n- ul.