CSS - 自定义列表，同时保留默认的十进制计数器
我正在制作一个自定义 ol>li ，看起来像这样
1 |列表内容
2 |列表内容
3 |列表内容
我引用了这篇文章：HTML + CSS：没有句点的有序列表？
但是，我无法让数字出现，并且它们需要在遵循标准数字计数时不带句点出现。
这是我的代码：
#content ol > li:before{
content: counter(customlistcounter) " |";
counter-increment: customlistcounter;
margin-left: -21px;
float: left;
width: 1em;
}
#content ol li{
padding-left: 21px;
I am making a custom ol>li to look like this
1 | List content
2 | List content
3 | List content
I have referenced this post: HTML + CSS: Ordered List without the Period?
But, I cannot get the numbers to appear, and they need to appear without periods while following standard numeric count.
here is my code:
#content ol > li:before{
content: counter(customlistcounter) " |";
counter-increment: customlistcounter;
margin-left: -21px;
float: left;
width: 1em;
}
#content ol li{
padding-left: 21px;
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你错过了几个步骤来让它与 css 一起工作；主要添加：
#content ol:first-child {。我设置了一个示例，以便您可以在此处查看它现在如何正常工作： http://jsfiddle.net/n5wx4/计数器重置：customlistcounter;}
正如另一位发帖者所说，但请记住，这只适用于较新的浏览器，因此 IE 6 和 7 已经过时了。
You were missing a couple steps to get it to work there with the css; primarily adding:
#content ol:first-child {. I set up an example so you can see how its now working correctly here: http://jsfiddle.net/n5wx4/counter-reset: customlistcounter;}
Like the other poster says though remember this only works with somewhat newer browsers so IE 6 and 7 are out.