带星号的列表项

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

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

会出现在我的网页上进行如下

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

使用CSS？

来源

2013-03-01 Wokoman

什么是asterix？你的意思是星号吗？ – j08691 2013-03-01 17:14:38

你可以，但你不得不取消样式列表（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: "**" 
}

来源

2013-03-01 17:22:47

因此，如果有100个项目，你需要100个内容：“*”规则？不妨跳过CSS并在HTML中对其进行硬编码。 – j08691 2013-03-01 17:30:04

您可以随时使用JavaScript进行操作。 – 2013-03-01 18:28:54

不够公平，但我最多有5个，所以这样做是可行的。 – Wokoman 2013-03-01 19:21:44

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

来源

2013-03-01 17:30:53 Gus

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或更高版本中受支持。

来源

2015-04-06 18:39:17

带星号的列表项

回答

相关问题