当前位置：首页 > CSS

css before 制作圆点

2026-03-12 03:29:29CSS

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

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

基础圆点样式

css before 制作圆点

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

带边框的圆点

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

动画效果的圆点

css before 制作圆点

.element::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ff5722;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

自定义形状的圆点

.element::before {
  content: "•";
  color: #4CAF50;
  font-size: 16px;
  margin-right: 8px;
}

响应式圆点

.element::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: currentColor;
  vertical-align: middle;
  margin-right: 0.3em;
}

这些方法可以根据实际需求进行调整，改变颜色、大小、间距等属性来适应不同的设计场景。