css - 计数器上的文本阴影或列表中的元素符号

Question

我想知道如何将text-shadow 添加到有序列表 </ol> . 我试过，下面的例子，但它不起作用。

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>

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

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

Answer 1

如果你还想在计数器/子弹上设置text-shadow，你需要把计数器/子弹放在:before伪元素中，这样counter/bullet 可以像其余文本一样具有文本阴影。

要保持计数器的位置，您可以将 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>