列表中的计数器或项目符号上的文本阴影

Question

我想知道如何将文本阴影 添加到有序列表中</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

如果您还想在计数器/项目符号上设置文本阴影,则需要将计数器/项目符号放在:before伪元素中,以便计数器/项目符号可以像文本的其余部分一样具有文本阴影.

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