如何为列表的::marker伪元素设置CSS背景？有哪些可行实现方案？

由于::marker伪元素当前仅支持颜色、字体、内容等少量CSS属性，不支持背景、边距、盒模型相关样式，最通用的替代方案是使用CSS计数器 + ::before伪元素完全替换默认的列表序号渲染，实现自定义背景效果。

完整实现代码 #

HTML 结构

<ol>
  <li class="myclass"> First Element
  </li>
  <li class="myclass"> First Element
  </li>
  <li class="myclass"> First Element
  </li>
</ol>

CSS 样式

/* 有序列表基础样式 */
ol {
  list-style: none; /* 关闭浏览器默认的列表序号 */
  counter-reset: li-counter; /* 初始化自定义计数器 */
  padding-left: 0; /* 可根据布局需求调整缩进值 */
}

/* 列表项样式 */
.myclass {
  counter-increment: li-counter; /* 每遍历一个li，计数器数值+1 */
  display: flex;
  align-items: center; /* 序号与列表文本垂直居中对齐 */
  gap: 10px; /* 序号和文本的间距，可自定义 */
  margin-bottom: 8px; /* 列表项之间的上下间距，可自定义 */
}

/* 自定义序号样式 */
.myclass::before {
  content: counter(li-counter); /* 输出计数器数值作为序号内容 */
  width: 24px; /* 序号容器宽度，可调整 */
  height: 24px; /* 序号容器高度，可调整 */
  line-height: 24px; /* 与高度保持一致实现文字垂直居中 */
  text-align: center;
  background-color: #2563eb; /* 序号背景色，可自定义 */
  color: #ffffff; /* 序号文字颜色，可自定义 */
  border-radius: 50%; /* 圆形背景，如需方形可删除该属性或设置为小数值 */
  font-size: 14px; /* 序号字号，可自定义 */
}

方案说明 #

• 所有样式属性都可以根据设计需求自由调整，可轻松实现方形、圆形、圆角矩形等任意序号背景样式
• 兼容性极佳，支持所有主流浏览器，包括IE11及以上版本

内容的提问来源于stack exchange，提问作者Nirmal Kumar