如何删除点“."从CSS list-style:decimal [英] How to remove dot '.' from CSS list-style:decimal

查看:65
本文介绍了如何删除点“."从CSS list-style:decimal的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有什么方法可以删除列表样式中小数点后的DOT吗?

Is there any way to remove the DOT after the decimal numbers in List style?

我的CSS

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

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

The result i was getting like this (not including PHP and HTML code)

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

期望的支出应该是这样的.

Desired Outpiut should be like this.

1 MILK
2 SOYA
3 BEANS
4 GARLIC

推荐答案

您可以通过在有序列表上的每个< li> 之前实现一个自定义计数器作为伪元素来实现此目的:

You can do this by implementing a custom counter as a pseudo-element before each <li> on your ordered list:

<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

这篇关于如何删除点“."从CSS list-style:decimal的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆