如何使用list-style-type:decimal且去除数字后的圆点

当然可以实现！有几种简单的CSS方案能帮你去掉数字后面的圆点，让列表呈现你想要的效果：

方法1：使用::marker伪元素（现代浏览器首选） #

这是最简洁的方式，直接修改列表标记的内容：

ol {
  list-style-type: decimal;
}

ol li::marker {
  content: counter(list-item) " "; /* 用内置计数器获取数字，替换默认的"数字."为"数字 " */
}

这个方法兼容性不错，Chrome、Firefox、Safari 13.1+、Edge等现代浏览器都支持，写法也最直观。

方法2：自定义计数器（兼容老浏览器） #

如果需要支持更老的浏览器（比如Safari 13以下），可以用自定义计数器的方式完全控制列表标记：

ol {
  counter-reset: list-counter; /* 初始化一个名为list-counter的计数器 */
  list-style: none; /* 关闭默认列表样式 */
  padding-left: 0; /* 可选：移除默认的左侧内边距，让排版更紧凑 */
}

ol li {
  counter-increment: list-counter; /* 每个列表项让计数器加1 */
}

ol li::before {
  content: counter(list-counter) " "; /* 显示计数器值，后面跟空格 */
  margin-right: 0.5em; /* 可选：调整数字和文本之间的间距 */
}

你可以根据自己的浏览器兼容需求选择其中一种方法，两种都能实现1 apple 2 pear 3 whatever的效果~

内容的提问来源于stack exchange，提问作者Cain Nuke