带星号的列表项
问题描述:
是否可以在有序列表中增加星号?所以,如果我有像带星号的列表项
<ol class="ast">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
会出现在我的网页上进行如下
* 项目1
** 项目2
***项目3
使用CSS?
答
你可以,但你不得不取消样式列表(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: "**"
}
答
我不相信有一种方法可以处理它的任意深度。 Diodeus的解决方案将以很多CSS代码为代价来处理已知的最大深度。
答
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或更高版本中受支持。
什么是asterix?你的意思是星号吗? – j08691 2013-03-01 17:14:38