伪元素实现虚线

伪元素实现横向虚线——可调整虚线之间的距离

背景：border: 1px dotted #ccc;并不能调整虚线之间的距离
解决方案： 伪元素、渐变实现.

.column-item::before {
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to left, #f1eded 0%, #ccc 50%, transparent 50%); /** toleft横向 to bottom纵向**/
    background-size: 8px 1px;
    background-repeat: repeat-x; /** x轴上的渐变 横向的虚线 **/
    position: absolute;
    content: '';
    top: 0;
    left: 0;
}