用伪元素画一条线

在前端开发中，画一条线是非常常见的需求。一般的做法是使用 border 来实现，但是 border 容易受到 box-sizing 的影响，而且无法控制线条的颜色和粗细。另外一种常见的做法是使用 svg 或者 canvas 来实现，但是这种做法相对比较复杂。今天我们介绍一种简单易用的实现方式，那就是使用伪元素来画线。

用伪元素绘制一条水平线

画一条水平线是最为简单的情况，只需要在目标元素的 :before 或者 :after 伪元素上设置一个宽度 100%，高度为线的粗细，并设置颜色即可。代码如下：

.line-horizontal:before {
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  background-color: #333;
}

可以通过调整 height 的值来改变线的粗细，background-color 改变颜色。

用伪元素绘制一条垂直线

画一条垂直线稍微有点复杂。原因是伪元素的 height 是不受控制的。不过可以使用 transform 来达到目标，将伪元素先旋转 90 度，再通过 transform-origin 把它旋转回来就行了。代码如下：

.line-vertical:before {
  content: '';
  display: block;
  height: 100%;
  width: 1px;
  background-color: #333;
  transform: rotate(90deg);
  transform-origin: top left;
}

用伪元素绘制一条斜线

画一条斜线跟垂直线类似，不过要注意一点，那就是需要设置 :before 和 :after 两个伪元素，这是因为一个伪元素只能绘制一条线。代码如下：

.line-slash:before,
.line-slash:after {
  content: '';
  display: block;
  height: 1px;
  width: 50%;
  background-color: #333;
  position: absolute;
  top: 50%;
}
.line-slash:before {
  left: 0;
  transform: rotate(-45deg);
}
.line-slash:after {
  right: 0;
  transform: rotate(45deg);
}

可以通过调整 transform 的值来改变线的角度，通过调整 width 的值来改变线的长度。

总结

通过使用伪元素来绘制线条可以避免使用复杂的 svg 或者 canvas，而且能够很好的控制线条的颜色和粗细。不过需要注意的是，该方法仅适用于单色的线条，如果需要绘制多色线条，还需使用 svg 或者 canvas。