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.

[Fiddle for the OP stuff](http://jsfiddle.net/cE4cc/) – potashin May 25 '14 at 09:06 — potashin, May 25 '14 at 09:06

web-tiki · Accepted Answer · 2017-10-20T10:55:02.000

6

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>

edited Oct 20 '17 at 10:55

answered May 25 '14 at 09:10

web-tiki

99,765
32
217
249

but content shadow is now gone. – vaibhav May 25 '14 at 09:11
@vaibhav oh sorry, I though you wanted the shadow only on the counter, here you are : http://jsfiddle.net/webtiki/Gn8dd/ – web-tiki May 25 '14 at 09:15
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:
1. content
– user3437488 May 26 '14 at 05:47
1

@edwardtorvalds browser support is very wide : https://caniuse.com/#feat=css-counters – web-tiki Oct 20 '17 at 10:50

score 0 · Answer 2 · edited May 23 '17 at 11:45

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.

Text Shadows on counter or bullet in list

2 Answers2

Linked