如何用HTML/CSS实现附图样式分割线？尝试div未达预期求方案

方案1：双线条分割线（单容器+伪元素替代双div） #

如果是要实现上下平行双线条的效果，无需用两个div，单个容器配合伪元素能更精准控制样式：

<div class="double-divider"></div>

.double-divider {
  position: relative;
  height: 12px; /* 控制两条线的垂直间距 */
  width: 100%;
}

.double-divider::before,
.double-divider::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #ccc;
}

.double-divider::before {
  top: 0;
}

.double-divider::after {
  bottom: 0;
}

方案2：带中间文字的分割线 #

如果是两侧线条、中间夹文字的分隔效果，同样用单容器+伪元素实现：

<div class="text-divider">
  <span>内容分隔</span>
</div>

.text-divider {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: center;
}

.text-divider::before,
.text-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #ccc;
}

.text-divider span {
  padding: 0 16px;
  color: #666;
  font-size: 14px;
}

方案3：渐变效果分割线 #

如果需要渐变过渡的分割线，单个div即可实现：

<div class="gradient-divider"></div>

.gradient-divider {
  height: 2px;
  width: 100%;
  background: linear-gradient(to right, transparent, #666, transparent);
}

双div实现易踩的坑 #

用两个div做分割线时，常出现这些问题：

• 两个div的margin/padding设置不当，导致线条间距、对齐不精准
• 父容器的排版规则（如block/flex）影响两个div的宽度一致性
  用伪元素方案能避免这些问题，因为伪元素属于同一容器的子元素，定位和宽度更容易统一控制。

内容的提问来源于stack exchange，提问作者Sam