CSS implements horizontal lines on both sides of text, CSS implements lines on both sides of text

Look at the effect first, there is a horizontal line on both sides of the login in other ways

. The code is as follows, using the scss syntax:

In uniapp, if it is ordinary html, just replace view with 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;
  }
}