如何通过CSS ::marker伪元素修改列表项数字的样式和位置？-css教程-PHP中文网

::marker 设置颜色或字体无效，通常因父级 list-style: none 抑制了原生标记；仅当 list-style-type 为 decimal 等有效值时 ::marker 才生效，且仅继承 color、font 相关属性，不支持 margin、padding 或位移。

如何通过css ::marker伪元素修改列表项数字的样式和位置？

为什么 `::marker` 设置颜色或字体无效？

常见现象是给 li::marker 加了 color: red 或 font-weight: bold 却没反应——大概率因为父级 ol 或 ul 上设置了 list-style: none，或者用了自定义 list-style-type: none。只有浏览器原生生成的标记（如 decimal、lower-alpha）才触发 ::marker 伪元素。

实操建议：

确认列表项未被 list-style: none 抑制，且 list-style-type 是有效值（如 decimal、upper-roman）
::marker 只继承部分属性：支持 color、font 相关（font-size、font-family）、content（可覆盖数字/符号），但不支持 margin、padding、display
若需完全控制外观，改用 list-style: none + counter-increment + content: counter(...) 手动注入更可靠

`::marker` 能不能把数字往右挪一点？

不能直接用 margin-left 或 transform 移动 ::marker——它没有盒模型，也不响应位移类属性。所谓“位置”，实际由 text-align 和 direction 在行内隐式对齐，且受 list-style-position 控制（inside / outside）。

实操建议：

list-style-position: inside 时，::marker 和文本同在 li 内容流中，可通过 padding-left 或 text-indent 间接调整视觉间距
list-style-position: outside（默认）时，标记位于 li 左侧外边距区，无法用 CSS 精确偏移；此时若要右移数字，只能用 counter 方案并配合 position: relative 定位
注意：Firefox 对 ::marker 的 content 支持较晚（v68+），旧版需降级处理

用 `counter` 替代 `::marker` 的最小可行写法

当样式或定位需求超出 ::marker 能力范围（比如加背景、圆角、绝对定位数字），counter 是更可控的选择，且兼容性更好（IE8+）。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

实操示例：

ol {
  counter-reset: item;
  list-style: none;
}
ol li {
  counter-increment: item;
}
ol li::before {
  content: counter(item) ".";
  color: #2563eb;
  font-weight: 600;
  margin-right: 0.5em;
  display: inline-block;
  width: 1.5em;
  text-align: right;
}

关键点：