css制作圆点

使用 list-style-type 属性

通过设置 list-style-type: disc 可以让无序列表 (<ul>) 默认显示为实心圆点。

ul {
  list-style-type: disc;
}

使用 ::before 伪元素

通过伪元素为自定义元素添加圆点，结合 content 和 border-radius 实现。

.custom-dot::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: black;
  border-radius: 50%;
  margin-right: 6px;
}

直接绘制圆形元素

通过 border-radius: 50% 将 <div> 或 <span> 转换为圆点。

.dot {
  width: 10px;
  height: 10px;
  background-color: #333;
  border-radius: 50%;
}

使用 SVG 内联

通过内联 SVG 创建精确控制的圆点，适合复杂场景。

<span class="svg-dot">
  <svg width="10" height="10" viewBox="0 0 10 10">
    <circle cx="5" cy="5" r="5" fill="currentColor" />
  </svg>
</span>

结合 Flexbox 对齐

若圆点需与文本对齐，使用 Flexbox 布局确保垂直居中。

.dot-container {
  display: flex;
  align-items: center;
  gap: 8px;
}