当前位置：首页 > CSS

css before 制作圆点

2026-04-01 23:34:12CSS

使用CSS ::before伪元素制作圆点

通过CSS的::before伪元素可以轻松为文本或其他元素添加圆点装饰。以下是几种实现方式：

基础圆点样式

css before 制作圆点

.element::before {
  content: "•"; /* Unicode圆点字符 */
  color: #ff0000; /* 圆点颜色 */
  margin-right: 8px; /* 与文字的间距 */
}

自定义样式圆点

css before 制作圆点

.element::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #3498db;
  border-radius: 50%; /* 关键属性实现圆形 */
  margin-right: 10px;
  vertical-align: middle;
}

动画圆点效果

.element::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #ff5722, #e91e63);
  border-radius: 50%;
  margin-right: 12px;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); }
  50% { transform: scale(1.1); }
  100% { transform: scale(0.95); }
}

带边框的圆点

.element::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border: 2px solid #2ecc71;
  border-radius: 50%;
  margin-right: 15px;
}

这些方法可以灵活应用于列表项、标题前缀或任何需要装饰性圆点的场景。通过调整尺寸、颜色和间距参数，可以获得各种视觉效果。