如何删除点'。'来自CSS list-style:decimal

时间:2015-02-13 00:31:15

标签: php html css list html-lists

有没有办法在列表样式中删除十进制数后的DOT?

我的CSS

.snum li {list-style:decimal outside none;}

我得到的结果是这样的(不包括PHP和HTML代码)

1. MILK
2. SOYA
3. BEANS
4. GARLIC

Desired Outpiut应该是这样的。

1 MILK
2 SOYA
3 BEANS
4 GARLIC

1 个答案:

答案 0 :(得分:4)

您可以通过在自定义列表中的每个<li>之前将自定义计数器实现为伪元素来执行此操作:

HTML:

<ol>
    <li>STUFF</li>
    <li>Stuff</li>
    <li>Stuff</li>
</ol>

CSS:

ol
{
    list-style: none;
    margin-left: 0;
}

li
{
    counter-increment: custom;
}

ol li:before
{
    content: counter(custom) " ";   
}

ol li:first-child {
    counter-reset: custom;
}

JSFiddle