如何在CSS中自定义无序列表的list-style小圆点？-css教程-PHP中文网

list-style-type仅能设置圆点形状（如disc、circle、square），无法单独控制颜色、大小或位置；颜色随text-color联动，尺寸不可调，精准定制须用list-style:none配合::before伪元素。

如何在css中自定义无序列表的list-style小圆点？

list-style-type 能改圆点形状，但改不了颜色和大小

直接用 list-style-type 只能切换预设类型：比如 disc（实心圆）、circle（空心圆）、square（方块），但它完全不支持调颜色、改尺寸、换位置。而且所有浏览器都把圆点颜色绑定在 color 属性上——你改文字色，圆点跟着变，没法单独控制。

常见错误是以为加个 font-size 就能让圆点变大，结果没用；或者给 ul 设了 color: red，发现文字和圆点一起红了，但你想让圆点蓝、文字黑，这就做不到。

list-style-type: disc 是默认值，无需显式写
设成 none 后必须手动重置 padding-left，否则内容会左移错位
IE 8 及更早版本不支持 list-style-type: square 以外的多数值（如 circle）

用 list-style-image 替换圆点图片要小心路径和 fallback

list-style-image 看似简单，实际容易踩坑：图片加载失败时，浏览器会悄悄回退到 list-style-type 的默认值（通常是 disc），而不是留白或报错，导致样式不一致。

路径必须相对 CSS 文件本身，不是 HTML 文件；如果图是 SVG，建议内联 base64 或用 url("data:image/svg+xml,...") 避免跨域或加载延迟。

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

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

下载

图片尺寸建议 ≤ 12×12px，太大容易撑开行高或遮挡文字
不要依赖图片自带 padding，圆点和文字间距得靠 padding-left 或 margin-left 单独调
若用 PNG，注意透明背景在深色主题下可能看不见

真正可控的方式：list-style: none + ::before 伪元素

这是目前最可靠、最灵活的做法——先关掉原生圆点，再用 ::before 在每个 li 前插入自定义内容。你可以自由控制颜色、大小、对齐、动画，甚至用 emoji 或 SVG。

关键点在于：伪元素默认是 inline，要设 display: inline-block 才能调宽高；垂直对齐用 vertical-align: middle 比 top 更稳；margin-right 控制圆点与文字间距比 padding-left 更精准。

ul.custom li {
  list-style: none;
  position: relative;
}
ul.custom li::before {
  content: "•";
  color: #007bff;
  font-size: 1.2em;
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.5em;
  vertical-align: middle;
}

list-style 简写属性容易覆盖意外值

list-style 是简写，一次设 type、position、image。但漏写某一项就会被重置为初始值。比如只写 list-style: square;，浏览器会自动补全成 list-style: square outside none;——这意味着你原本设的 list-style-image 会被清掉。