制作CSS圆点最推荐使用伪元素法，即通过::before或::after结合border-radius: 50%、position: absolute和transform: translateY(-50%)实现，既不增加HTML结构，又能精准控制位置与样式，适用于列表标记或文本点缀，且具备高可维护性、灵活性及响应式优势。
制作CSS圆点，说白了就是利用CSS的各种属性来绘制一个圆形，并将其应用到需要的地方，比如作为列表项的标记，或者任何需要点缀的元素。核心方法通常是利用
border-radius: 50%将一个方形元素变成圆形，再配合
background-color来填充颜色。具体实现上，我们可以直接创建一个小元素，也可以通过伪元素（
::before或
::after）为现有元素添加，甚至直接利用
list-style-type或
::marker来定制列表项的默认圆点。选择哪种方式，往往取决于你的具体需求和对灵活性的考量。
解决方案
在我看来，制作CSS圆点，最常用且灵活的方式主要有以下几种：
-
基础元素法： 创建一个简单的
div
或span
元素，赋予它相同的宽度和高度，然后将border-radius
设为50%
。.dot-basic { display: inline-block; /* 确保能设置宽高 */ width: 10px; height: 10px; background-color: #3498db; /* 你的圆点颜色 */ border-radius: 50%; /* 关键：变成圆形 */ vertical-align: middle; /* 保持与文本的垂直对齐 */ margin-right: 5px; /* 与后续内容的间距 */ }这种方法直观易懂，但会增加HTML结构。
-
伪元素法 (
::before
/::after
)： 这是我个人最推荐的方法，因为它不增加额外的HTML标签，将样式和内容分离得很好，尤其适合作为列表项标记或修饰文本。- 这是一个列表项
- 这是另一个列表项
ul { list-style: none; /* 移除浏览器默认的列表标记 */ padding-left: 0; /* 移除默认内边距 */ } li { position: relative; /* 为伪元素定位提供参考 */ padding-left: 20px; /* 为圆点腾出空间 */ line-height: 1.6; } li::before { content: ''; /* 伪元素必须有content属性 */ position: absolute; /* 绝对定位，脱离文档流，方便精确控制位置 */ left: 5px; /* 圆点距离左侧的距离 */ top: 50%; /* 垂直居中 */ transform: translateY(-50%); /* 精确垂直居中 */ width: 8px; height: 8px; background-color: #2ecc71; border-radius: 50%; }这种方式非常强大，可以创建各种自定义标记。
立即学习“前端免费学习笔记（深入）”；
-
列表样式属性 (
list-style-type
,list-style-image
,::marker
)： 对于无序列表，CSS提供了直接控制标记的属性。list-style-type: disc;
(默认实心圆)list-style-type: circle;
(空心圆)list-style-type: square;
(实心方块)list-style-image: url('path/to/your/dot.png');(使用图片作为标记，但灵活性不如CSS绘制)::marker
伪元素：这是CSS Level 3引入的，允许我们直接样式化浏览器默认的列表标记。ul li::marker { color: #e74c3c; /* 改变标记颜色 */ font-size: 1.2em; /* 改变标记大小 */ /* 注意：::marker的样式属性有限，不能直接设置border-radius */ }::marker
的优势在于它保留了列表的语义，但它的样式控制不如伪元素灵活，比如你不能直接用它画一个自定义的圆点形状，更多是改变现有标记的颜色和大小。
为什么不直接用图片，CSS绘制圆点有什么优势？
说实话，我经常看到一些新手在需要小圆点的时候，第一反应是找一张圆点图片。这在某些特定场景下确实可行，比如图片本身就是设计的一部分，或者有复杂的纹理。但从前端开发的角度来看，CSS绘制圆点相比使用图片，优势是压倒性的，甚至可以说，对于简单的圆点，用图片几乎是一种“反模式”。
首先，可伸缩性与清晰度。CSS绘制的圆点是矢量图形，无论在任何分辨率、任何缩放比例下，它都会保持完美的圆形和清晰的边缘，不会出现像素化。而图片，尤其是位图（如PNG、JPG），一旦放大，就会变得模糊不清，影响用户体验，尤其是在如今高DPI屏幕普及的情况下，一张小小的图片可能需要提供好几个分辨率版本（@2x, @3x），徒增工作量。
其次，性能考量。每使用一张图片，浏览器就需要发起一次HTTP请求去下载它。即使图片再小，累积起来也会增加页面的加载时间。CSS绘制的圆点则完全不需要额外的请求，它直接通过CSS代码渲染，加载速度更快，对服务器的压力也更小。对于追求极致性能的现代Web应用来说，减少HTTP请求是优化加载速度的关键之一。
再者，灵活性与维护性。CSS圆点的颜色、大小、甚至形状（比如从圆点变成椭圆）都可以通过简单的CSS属性修改，无需打开任何图形编辑软件。如果你需要根据不同的主题或状态改变圆点的颜色，只需修改一行CSS代码即可。而图片则需要重新制作、替换。这种灵活性在项目迭代和主题切换时显得尤为重要，大大降低了维护成本。
最后，代码的简洁性。CSS代码通常比Base64编码的图片URL更简洁、更易读。而且，它与页面的其他样式更好地融合，更容易管理和调试。我个人觉得，能用CSS解决的问题，就尽量不要引入图片，这是前端开发的一个基本原则。
如何在不影响文本布局的情况下，精确控制圆点位置？
精确控制圆点位置，尤其是要它“漂浮”在文本旁边，或者与文本内容保持完美的垂直对齐，确实需要一些技巧。直接用
margin和
padding有时会显得笨拙，或者在不同行高下表现不一致。我常用的，也是最可靠的方法，就是结合
position: absolute和
transform。
-
position: absolute
与父元素相对定位： 这是最核心的思路。当你希望一个元素（比如伪元素绘制的圆点）脱离正常文档流，但又相对于某个父元素进行定位时，你需要将父元素设置为position: relative;
。这样，子元素（圆点）的top
、bottom
、left
、right
属性就会相对于这个父元素来计算。li { position: relative; /* 关键！为伪元素提供定位上下文 */ padding-left: 20px; /* 给圆点留出空间，防止文本覆盖 */ /* 其他样式 */ } li::before { content: ''; position: absolute; left: 5px; /* 距离li左边缘5px */ top: 50%; /* 伪元素的顶部与li的垂直中心线对齐 */ transform: translateY(-50%); /* 向上移动自身高度的一半，实现精确垂直居中 */ /* 圆点大小和颜色等 */ }这里的
top: 50%;
和transform: translateY(-50%);
组合是实现完美垂直居中的经典技巧，无论li
的行高或内容如何变化，圆点都能稳稳地居中。 -
Flexbox布局辅助： 对于更复杂的列表项布局，或者当你的圆点本身就是列表项的一部分时，Flexbox是一个非常强大的工具。你可以将列表项（
li
）设置为Flex容器，然后将圆点（可以是伪元素，也可以是单独的span
）作为Flex项目进行对齐。li { display: flex; /* 将li变为Flex容器 */ align-items: center; /* 垂直居中所有Flex项目 */ /* gap: 10px; 如果需要圆点和文本之间的间距 */ } li::before { content: ''; flex-shrink: 0; /* 防止圆点被压缩 */ width: 8px; height: 8px; background-color: #f39c12; border-radius: 50%; margin-right: 10px; /* 控制圆点与文本的间距 */ /* 不需要position: absolute和transform了 */ }这种方式的优点是布局更加自然，易于管理对齐和间距，尤其适合多行文本的列表项。
vertical-align
(谨慎使用)： 对于简单的行内元素，vertical-align
可以用于调整垂直对齐。但它主要影响行内块元素相对于其父元素基线的对齐，对于精确控制圆点与文本的相对位置，它的表现可能不如position: absolute
或Flexbox稳定和灵活，特别是当行高不确定时。通常我会避免用它来做精细的圆点定位。
选择哪种方法，取决于你的具体场景和对布局复杂度的要求。对我来说，伪元素配合
position: absolute和
transform是万金油，而Flexbox则在整个列表项布局需要精细控制时大放异彩。
除了简单的圆点，CSS还能模拟哪些列表项标记样式？
CSS绘制标记的魅力在于其无限的可能性。一旦你掌握了伪元素和
border-radius这些基本工具，你就能跳出“圆点”的限制，模拟出各种各样的列表项标记样式。这不仅仅是视觉上的美化，更是提升用户体验和信息传达效率的手段。
-
实心方块或矩形： 这是最简单的变体，只需移除
border-radius: 50%
即可。你可以根据需要调整width
和height
来创建方块或矩形。li::before { content: ''; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background-color: #9b59b6; /* border-radius: 0; 默认就是方块 */ } -
空心圆或空心方块： 通过设置
border
和background-color: transparent
来实现。li::before { content: ''; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border: 2px solid #34495e; /* 边框颜色和粗细 */ background-color: transparent; /* 背景透明 */ border-radius: 50%; /* 空心圆 */ /* 或 border-radius: 0; 空心方块 */ } -
箭头标记： 这稍微复杂一点，但仍然可以通过CSS边框技巧实现。通常是利用伪元素的边框属性，只显示其中两条边，然后旋转。
li::before { content: ''; position: absolute; left: 5px; top: 50%; transform: translateY(-50%) rotate(45deg); /* 旋转45度形成箭头 */ width: 8px; height: 8px; border-top: 2px solid #e67e22; /* 只显示上边框 */ border-right: 2px solid #e67e22; /* 只显示右边框 */ background-color: transparent; /* 注意：这里没有border-radius，是方块旋转 */ }或者更简单的，直接使用Unicode字符：
content: '► ';
但这种方式样式控制有限。 -
自定义图标（SVG或字体图标）： 虽然我们说尽量避免图片，但对于复杂的、矢量化的图标，SVG或字体图标是很好的选择。它们可以嵌入到伪元素中。
-
SVG： 将SVG代码Base64编码后放入
background-image
。li::before { content: ''; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); width: 16px; /* 根据SVG尺寸调整 */ height: 16px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; } -
字体图标： 使用像Font Awesome这样的字体图标库，将图标的Unicode字符作为伪元素的
content
，并设置相应的font-family
。li::before { content: '\f00c'; /* Font Awesome的check图标Unicode */ font-family: 'Font Awesome 5 Free'; /* 确保已引入字体 */ font-weight: 900; /* 对于实心图标 */ position: absolute; left: 5px; top: 50%; transform: translateY(-50%); color: #27ae60; /* 图标颜色 */ font-size: 14px; /* 图标大小 */ }
-
SVG： 将SVG代码Base64编码后放入
-
自定义数字计数器： 对于有序列表，我们可以完全自定义数字的样式，甚至创建非传统的计数方式。这需要用到CSS的
counter-reset
和counter-increment
属性。ol { list-style: none; counter-reset: my-counter; /* 重置计数器 */ padding-left: 0; } ol li { position: relative; padding-left: 30px; counter-increment: my-counter; /* 每次li出现，计数器加1 */ } ol li::before { content: counter(my-counter) '.'; /* 显示计数器值，后面加个点 */ position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-weight: bold; color: #8e44ad; min-width: 20px; /* 确保数字有足够的空间 */ text-align: right; margin-right: 5px; }通过这些方法，你可以让你的列表项标记变得生动有趣，而不仅仅是千篇一律的圆点。这不仅能提升页面的视觉吸引力，也能更好地传达信息层级和类型。
