实现中间字，前后是线的标题

最新推荐文章于 2022-05-03 13:55:39 发布

Marker.杨

最新推荐文章于 2022-05-03 13:55:39 发布

阅读量252

点赞数

分类专栏：编程

本文链接：https://blog.csdn.net/weixin_42556039/article/details/84030657

版权

编程专栏收录该内容

9 篇文章 0 订阅

订阅专栏


.my_position {
  display: inline-block;
  vertical-align: top;
  margin: 12rpx 0 0;
  text-align: center;
  font-size: 26rpx;
  color: #fff;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 14rpx;
}

.my_position::before {
  content: '';
  width: 52rpx;
  height: 2rpx;
  background-color: #5596f0;
  position: absolute;
  top: 50%;
  transform: translate(calc(-100% - 20rpx), -50%);
}

.my_position::after {
  content: '';
  width: 52rpx;
  height: 2rpx;
  background-color: #5596f0;
  position: absolute;
  top: 50%;
  transform: translate(20rpx, -50%);
}

rpx是小程序的单位