怎么在编辑网页时用HTML代码给列表前面的小圆点换颜色-html教程-PHP中文网

列表项前的圆点无法通过直接设置color改变颜色，因其为浏览器渲染的装饰性图形；应使用list-style: none配合li::before伪元素自定义符号并单独设色。

怎么在编辑网页时用html代码给列表前面的小圆点换颜色

列表项前的圆点不是独立元素，不能直接用 color 改

很多人试过给

或

加 color: red，发现小圆点颜色没变——这是因为默认的项目符号（bullets）是浏览器渲染的装饰性图形，不继承文本颜色。它只在某些情况下跟随 color，但不可靠，尤其在 Chrome/Firefox 中行为不一致。

用 list-style-type + list-style-image 不够灵活

改用图片符号（list-style-image: url(...)）能控制颜色，但要额外切图、适配缩放、处理高 DPI 屏幕，且无法响应式变色。纯 CSS 方案更轻量：

list-style: none 关掉默认圆点
用 ::before 伪元素在每个
前插入自定义内容（比如 ●）
给这个伪元素单独设 color 或 background

CSS 伪元素方案：稳定、可配色、无需图片

实操代码如下（支持所有现代浏览器）：

ul.custom-bullets {
  list-style: none;
  padding-left: 0;
}
ul.custom-bullets li {
  position: relative;
  padding-left: 24px;
}
ul.custom-bullets li::before {
  content: "●";
  color: #e74c3c; /* 这里改圆点颜色 */
  position: absolute;
  left: 0;
  top: 0.2em;
}

注意几个关键点：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

top: 0.2em 是为了垂直对齐文字基线，不同字体可能需要微调
如果要用空心圆或箭头，把 content 换成 "○" 或 "→" 即可
想加背景色圆点？把 color 换成 background + border-radius + width/height，再用 display: inline-block

别忘了兼容旧版 Safari 和 IE 的坑

IE 11 及更早版本不支持 ::before 在

上生效（会渲染在外）。如果必须支持 IE，得退回到 list-style-image 或用 JS 插入元素。但绝大多数项目现在可忽略 IE —— 真要兼容，优先测试 Safari 12–13，它们对 position: absolute 在 li::before 中的支持偶尔有偏移问题。

真正麻烦的是当列表嵌套时，子

里的 li 容易被父级样式污染，记得用更具体的选择器（比如 ul ul li::before 单独重置）。