5

是否可以在有序列表中增加星号？所以如果我有类似的东西

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

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

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

使用 CSS 吗？

4

4 回答 4

3

可以，但您必须取消列表 ( list-style:none) 的样式并使用“before:”伪类来绝对定位您的星号，并结合n-thchild 来设置星号的数量。

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

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: "**" 
}
于 2013-03-01T17:22:47.253 回答
1

CSSsymbols()功能允许您创建类似于您正在寻找的东西。

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

一个示例是对列表进行样式设置，例如：

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

虽然上面的代码会像您想要的那样自动增加每个星号的数量，但星号<li>的数量会向左增长，而不是像您所追求的那样向右增长。

此外，一旦您超过一定数量的列表项，星号的数量将超出您的可用空白空间。有关此问题的示例，请参阅此演示。

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

于 2015-04-06T18:39:17.050 回答
0

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

于 2013-03-01T17:30:53.340 回答
0

总会有办法的：

ul {
     list-style: "*";
}

li {
     padding-left: 20px;
}

奇迹般有效。

于 2021-07-14T10:38:08.127 回答