[分享]css两条线在一起

在CSS中，有一个常见的问题是如何将两条线放在一起，以便创建分割线或边框。这可以通过使用伪元素实现。

.separator {
  position: relative;
}
.separator::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: black;
  z-index: 1;
}
.separator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: black;
  z-index: 2;
} 

在这个示例中，我们首先为包含元素设置了一个相对定位。然后，我们使用::before和::after伪元素来创建两条线。伪元素的content属性设置为空字符串，因此它们不会显示在页面上。我们将它们绝对定位在父元素的50%处，以确保它们位于页面中心。我们还将它们的z-index属性设置为1和2，以便第二条线出现在第一条线的上方。

通过使用这个代码，您可以轻松地创建美观的分割线和边框，同时保持代码的简洁和可读性。这是一个简单而有效的CSS技巧，老手和新手都可以使用它来改进他们的页面设计。