before after 扩展用法——border

主要解决两个问题:

1.border的长度和位置控制

2.相同元素的border重叠

&:after, &:before{
  content: " ";
  position: absolute;

   100%;
  height: 0px;

  border-bottom: 1px solid #ccc;

  color: #ccc;
  transform-origin: 0 100%;
  transform: translate3d(1rem, 0, 0) scaleY(0.5);
}

&:after{

left: 0;

bottom: 0;

}

&:before{

left: 0;

top: 0;

}

两个item的border重合的原因分析：

item1、item2的borde各占用1px.

分别设置bottom: 0 和top: 0后，他们加起来就是2px.

解决办法：让border-bottom下移1px,或者border-top上移1px.

&:after{

left: 0;

bottom: –1px;

}

&:before{

left: 0;

top: 0;

}