如何移除HTML中的::marker伪元素？list-style:none无效

常见解决方法 #

1. 直接隐藏::marker伪元素 #

这是最直接有效的方式，既然已经通过开发者工具确认目标是::marker，直接设置它的display: none即可：

li::marker {
  display: none;
}

如果是其他带标记的元素（比如<summary>），把选择器换成对应元素即可。

2. 检查CSS选择器优先级 #

如果list-style:none没生效，大概率是你的选择器优先级不够，被其他更高优先级的规则覆盖了。比如页面中可能存在类似.container li这种更具体的选择器，或者有规则加了!important。

可以尝试用更具体的选择器命中目标元素，比如：

ul.custom-list li {
  list-style: none;
}

尽量避免滥用!important，优先通过提升选择器特异性来解决优先级问题。

3. 清除自定义的marker内容 #

如果目标元素的::marker被自定义了content属性（比如content: "•"），此时list-style:none无法覆盖自定义内容，需要直接清除marker的content：

li::marker {
  content: none;
}

相关知识点 #

• ::marker是CSS伪元素，专门用于选中具有display: list-item属性元素的标记部分（默认的<li>、<summary>，或者手动设置该属性的元素都会生成这个伪元素）。
• list-style是列表样式的简写属性，作用于列表容器（<ul>/<ol>）或列表项（<li>），控制标记的类型、位置和样式。但当::marker被显式设置样式时，list-style的部分规则会被伪元素的样式覆盖。
• 自定义::marker的content属性后，默认的列表标记会被替换，此时list-style-type等设置会失效，必须通过修改::marker的样式来调整标记。

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