css - 带星号的列表项

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 child 来设置星号的数量。

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

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: "**" 
}