Title: Text Shadows on counter or bullet in list
Tags: css;html-lists;shadow
Question: I want to know how to add text-shadow to an ordered list ```</ol&gt;```.
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&gt;
  <li&gt;content</li&gt;
  <li&gt;content</li&gt;
  <li&gt;content</li&gt;
</ol&gt;```




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.

Comment: [Fiddle for the OP stuff](http://jsfiddle.net/cE4cc/)

Here is the accepted answer: 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&gt;
    <li&gt;content</li&gt;
    <li&gt;content</li&gt;
    <li&gt;content</li&gt;
</ol&gt;```




Comment for this answer: @vaibhav oh sorry, I though you wanted the shadow only on the counter, here you are : http://jsfiddle.net/webtiki/Gn8dd/
Comment for this answer: @edwardtorvalds browser support is very wide : https://caniuse.com/#feat=css-counters
Comment for this answer: To start with a custom value for an ordered list when you use this, for example you want to start with 2. you should do this:   content  
Comment for this answer: but content shadow is now gone.

Here is another answer: 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&gt; elements in <ul&gt; 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.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2014:00:05/25/14', 'FavoriteCount': 1.0, 'PostTypeId': 1, 'Tags': '<css><html-lists><shadow>', 'Title': 'Text Shadows on counter or bullet in list', 'ViewCount': 1943, 'id': 23853647, 'user_AboutMe': None, 'user_AccountId': 4196106.0, 'user_DisplayName': 'user3437488', 'user_Reputation': 75.0, 'user_Views': 24.0, 'user_id': 3437488.0}}