CSS小技巧：使用伪类控制border的长度，实现div之间的分割线

给div设置border时，border属性中有border-width属性可以控制border的宽度，但是没有控制border长度的属性。如果边框的长度和div的高度一致时，直接设置border:1px solod #ccc类似样式即可。但想实现如下图所示，border的长度和div的高度不一致，可以使用伪类实现。

代码如下：
html

<div class="action">
    <div class="action-item">
      <div class="action-img">
        <image src="{{imageUrl}}/index/action-1.png"></image>
      </div>
      <div class="action-title">第一标题</div>
      <div class="action-desc">标题描述</div>
    </div>
    <div class="action-item">
      <div class="action-img">
        <image src="{{imageUrl}}/index/action-2.png"></image>
      </div>
      <div class="action-title">第二标题</div>
      <div class="action-desc">标题描述</div>
    </div>
    <div class="action-item">
      <div class="action-img">
        <image src="{{imageUrl}}/index/action-3.png"></image>
      </div>
      <div class="action-title">第三标题</div>
      <div class="action-desc">标题描述</div>
    </div>
  </div>
</div>

css:

.action{
  width: 100%;
  display: flex;
  justify-content: space-around;
  
}
.action-item{
  flex: 1 1 33%;
  text-align: center;
  font-size: 28px;
  color: #000001;
  position: relative;//这里是关键
}
.action-item:not(:last-child)::before{//这里是关键
  content: '';
  width: 1px;//边框宽度
  height: 75px;//边框长度
  position: absolute;
  right: 0;//设置为右边框
  top: 88px;//在距离顶部88px的地方开始绘制边框
  background-color: #999999;//边框的颜色
}
.action image{
  width: 127px;
  height: 116px;
}
.action-desc{
  color: #999999;
  font-size: 24px;
}

同理，通过设置伪类的位置，可以实现上边框、左边框和下边框。