使用css伪类制作隔断条

发布于 2020-07-20  16 次阅读


<!-- wxml -->

<view class="line-view">须知</view>
/**
 * wxss
 */

.line-view{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70rpx;
  width: 100%;
  font-size: 28rpx;
  color: #909399;
  position: relative;
  background-color: #f1f1f1;
}

.line-view::before {
  content: '';
  width: 200rpx;
  height: 1rpx;
  background-color: #909399;

  position: absolute;
  left: calc((100vw - 4em)/2 - 200rpx);
  top: 50%;
}

.line-view::after {
  content: '';
  width: 200rpx;
  height: 1rpx;
  background-color: #909399;

  position: absolute;
  right: calc((100vw - 4em)/2 - 200rpx);
  top: 50%;
}

效果如下: