文本阴影在计数器或子弹的列表。

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.

我的问题是列表计数器没有文本阴影。我需要向有序列表中的数字添加文本阴影，比如1。或2。等。

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

顺便说一下，我希望它仍然保持列表样式，其中内容在数字前缩进。

2 个解决方案

#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.

如果您还想在计数器/bullet上设置文本阴影，您需要将计数器/bullet放在:在pseudo元素之前，以便计数器/bullet可以像文本的其他部分一样具有文本阴影。

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%;.

为了保持计数器的位置，你可以设置位置:绝对;将伪元素置于左侧的li外，右: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>

#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.

如果您知道将有多少项作为最大值，您可以为ul的每个n-th子创建一个自定义规则。

#1