Vue 三种带文字分割线实现方式

第一种

利用::before 和 ::after实现

<div class="not_has_more"> 常用品牌 </div> .not_has_more { margin: 40px 0; line-height: 50px; text-align: center; position: relative; height: 33px; font-size: 24px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: rgba(140, 142, 165, 1); line-height: 33px; &::after, &::before { position: absolute; width: 54px; height: 0.5px; background: #dadada; content: ''; top: 15px; } &::after { left: 28%; } &::before { right: 28%; } }

第二种

利用 background和flex叠加实现

<div class="divider_self"> <div class="txt">常用品牌</div> </div> .divider_self { margin: 36px auto 35px; width: 324px; background-color: #e6e6e6; height:.7px; position: relative; @include flex; .txt { width: 144px; height: 24px; font-size: 24px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #8c8ea5; line-height: 24px; background-color: #ffffff; text-align: center; } }

第三种

使用第三方UI库 vant的组件

<Divider class="divider_cp"> 常用品牌 </Divider> .divider_cp { margin: 24px auto 25px; width: 324px; background: #ffffff; border-radius: 24px; border-color: #e6e6e6; padding: 0 16px; font-size: 24px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #8c8ea5; line-height: 24px; }