柜台上的文字阴影或列表中的项目符号 [英] Text Shadows on counter or bullet in list

问题描述

我想知道如何将文本阴影添加到有序列表 </ol>. 我已经尝试过以下示例，但是它不起作用.

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>

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

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.

推荐答案

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

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.

要保持计数器的位置，可以将position:absolute;设置为伪元素，然后使用right:100%;将其放置在左侧li之外.

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>

这篇关于柜台上的文字阴影或列表中的项目符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！