CSS实现文字两边横线,CSS实现文字两边线条

先看效果，其他方式登陆两边各有一条横线

代码如下，用的是scss语法：

uniapp中，如果是普通的html，将view替换成div即可。

    <view class="other-login">
      <view class="line"></view>
      <view class="other">
        <view class="text">其他方式登陆</view>
      </view>
    </view>

scss

.other-login{
    
    
  display: flex;
  width: 80%;
  background: #ccc;
  height: 20px;
  margin: 0 auto;
  background-size: cover;
  position: relative;
  justify-content: center;
  align-items: center;
  .other{
    
    
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    .text {
    
    
      background:#ccc;
      padding:0px 20px;
    }
  }
  .line{
    
    
    display: inline-block;
    width: 100%;
    border: 1px solid whitesmoke;
    background: whitesmoke;
    position: absolute;
  }
}