如何在保留list-style:none时为ol的counter(mycounter)添加后缀点

嘿，这个问题很容易解决，不用取消list-style:none就能实现你要的带点效果～

你之前试的content:counter(mycounter, ".")写法搞错了参数用途，counter()的第二个参数是指定计数器的样式类型（比如decimal、lower-roman这类），不是直接加后缀。正确的做法是把计数器和后缀点直接拼接成字符串：

.article .article-info ol li:before {
 content:counter(mycounter) "."; /* 把计数器和点直接拼在一起 */
 counter-increment:mycounter;
 position:absolute;
 top:0;
 left:-30px;
 width:25px;
 line-height:20px;
 border-radius:50%;
 color:#B71A8B;
 text-align:center;
 margin-top:7px;
 font-weight:bold;
 font-size:1.2em;
 margin-left:30px
}

另外给你提个小优化：现在你的代码里counter-increment是写在content之后的，CSS的执行顺序是先计算content的当前计数器值，再执行counter-increment，这会导致第一个列表项显示初始默认值0，之后计数器才加1。建议把counter-increment移到content前面，这样先递增计数器，再显示内容，第一个项就能正确显示1.了：

.article .article-info ol li:before {
 counter-increment:mycounter; /* 先让计数器加1 */
 content:counter(mycounter) "."; /* 再显示带点的数字 */
 /* 其他样式保持不变 */
}

同时在ol的样式里，你可以明确设置计数器初始值，让逻辑更清晰：

.article .article-info ol {
 list-style:none;
 counter-reset:mycounter 0; /* 明确从0开始计数 */
 padding:0;
}

这样修改后，就能完美实现你想要的带后缀点的圆形数字计数器效果啦～

内容的提问来源于stack exchange，提问作者Ara Malki