Question

是否可以在有序列表中增加星号？所以，如果我有像

这样的东西

<ol class="ast">
<li>item 1</li> 
<li>item 2</li> 
<li>item 3</li> 
</ol>

将显示在我的页面上，如下所示

*第1项 **项目2 ***第3项

使用css？

Answer 1

你可以，但是你必须取消设置列表（list-style:none）的样式并使用“before：”伪类来绝对定位你的星号，并结合n-th子设置星号的数量。

这样的东西，但你必须稍微调整一下。

ul, li {
   margin:0;
   padding:0;
  list-style:none      
}

li {
   padding-left:20px; 
}

li:nth-child(1):before {
   content: "*" 
}

li:nth-child(2):before {
   content: "**" 
}

Answer 2

CSS symbols()功能可让您创建类似于您正在寻找的内容。

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/symbols。

一个例子是设置如下列表的样式：

ol {
  list-style: symbols(symbolic "*");
}

虽然上面的代码会根据您的需要自动增加每个<li>的星号数量，但是星号的数量会增加到左侧而不是右侧，就像您之后的那样。

此外，一旦超过一定数量的列表项，星号的数量将超出可用的空白区域。 See this demo for an example of this problem

此外，symbols()目前仅支持FireFox 35或更高版本。

Answer 3

总有办法：

ul {
     list-style: "*";
}

li {
     padding-left: 20px;
}

就像一个魅力。

Answer 4

我不相信有任何方法可以处理任意深度。 Diodeus的解决方案将以大量CSS代码为代价处理已知的最大深度。

列出项目与asterix

4 个答案: