如何在行的中心添加水平线我想在 vue.js 中添加一些内容？

Question

我有一个负责登录的组件，在登录按钮之后，我想添加一个必须位于水平线中心的内容（或）like this，我正在尝试使用水平线它不会出现，我我正在尝试很多事情，但是一旦看到我的 [Output]2 如何通过使用 simpl html css 来实现这件事，它就没有按照我的需要发生，请帮助我如何解决这个问题..

Login.vue

<template>
<div class="main">
    <div class="container">
        <img id="side-img" src="../assets/sideImg.png" alt="notFound" />
        <p id="side-content">Online Book Shopping</p>
        <div class="box">
            <div class="headings">
                <h5 class="signin" id="login" @click="isLogin = true">Login</h5>
                <h5 class="signup" id="signup" @click="isLogin = false">signup</h5>
            </div>
            <form ref="myForm">
                <div class="username">
                    <p>EmailID</p>
                    <input type="email" id="Email-input" class="emailbox" required v-model="email" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
                </div>
                <div class="password-section">
                    <p>Password</p>
                    <input :type="password_type" class="password"  id="passField" v-model="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$" required>
                    <i class="bi bi-eye-slash" id="togglePassword" ></i>
                </div>
                <div class="forget-section">
                    <a href="">Forgot-password</a>
                </div>
                <div class="btn-section">
                    <button type="submit" class="login-btn">Login</button>
                </div>
                <div class="seperator">
                    <h5>OR</h5>
                </div>
            </form>
        </div>
    </div>
</div>
</template>

<script>

</script>

<style lang="scss" scoped>
@import "colors";

.main .container{
    margin-top: 185px;
    left: 320px;
    width: 624px;
    height: 391px;
    background: #F5F5F5 0% 0% no-repeat padding-box;    
    border-radius: 21px;
    opacity: 1;
}
img{
    margin-top: 52px;
    margin-left: 53px;
    width: 245px;
    height: 245px;
    background: transparent  0% 0% no-repeat padding-box;
    opacity: 1;
    border-radius: 50%;
}
.container p{
    color:$light_black;
    margin-top: 31px;
    margin-left: 71px;
    margin-bottom: 39px;
    width: 309px;   
    height: 24px;
    text-align: left;
    font: normal normal medium 18px/24px Roboto;
    letter-spacing: 0px;
    color: $light_black;
    text-transform: uppercase;
    opacity: 1;
    font-weight: 500;
}
.box{
    background: $pale_white 0% 0% no-repeat padding-box;
    box-shadow: 0px 5px 15px #00000029;
    border: 1px solid #E4E4E4;
    border-radius: 6px;
    opacity: 1;
    height: 425px;
    width:389px;
    margin-top: -406px;
    margin-left: 358px;
}
.headings{
  display:flex;
  float:left;
  opacity: 1;
  padding-top: 28px;
  color: $light_black;
  text-transform: uppercase;
  padding-left:69px;
  width: 89px;
  height: 33px;
  text-align: left;
  font: normal normal medium 25px/33px Roboto;
  letter-spacing: 0px;
  color: $light_black;
  text-transform: uppercase;
}
.signup{
    padding-left: 92px; /* 82 */
    
}

.username p{
    text-align: left;
    font: normal normal normal 12px/13px Roboto;
    letter-spacing: 0px;
    color: #0A0102;
    text-transform: capitalize;
    opacity: 1;
    width: 36px;
    height: 13px;
    margin-top:91px;
    margin-left: 69px;
    margin-bottom: 0px;
}
.emailbox{
    background: $pale_white 0% 0% no-repeat padding-box;
    border: 1px solid $border_clr;
    border-radius: 2px;
    opacity: 1;
    margin-left: 69px;
    width: 252px;
    height: 35px;
}
.password-section p{
    text-align: left;
    font: normal normal normal 12px/13px Roboto;
    letter-spacing: 0px;
    color: $light_black;
    text-transform: capitalize;
    opacity: 1;   
    width: 44px;
    height: 13px;
    margin-top: 15px;
    margin-left: 69px;
    margin-bottom: 0px;
}
.password{
    background: $pale_white 0% 0% no-repeat padding-box;
    border: 1px solid $border_clr;
    border-radius: 2px;
    opacity: 1;
    width: 252px;
    height: 35px;
    margin-left: 69px;
    
}

.forget-section a{
    text-decoration: none;
    color:#9D9D9D;
    width: 81px;
    height: 13px;
    
    // font: normal normal normal 1px/13px Roboto;
    letter-spacing: 0px;
    color: #9D9D9D;
    opacity: 1;
    margin-left:202px;
    margin-top:3px;
}
.btn-section .login-btn{
    margin-left:69px;
    margin-top:14px;
    width: 252px;
    height: 37px;
    background: #A03037 0% 0% no-repeat padding-box;
    border-radius: 3px;
    opacity: 1;
    font: normal normal normal 15px/20px Roboto;
    letter-spacing: 0px;
    color: #FFFFFF;

}


.headings{
    cursor:pointer;
}
.box:hover{
    box-shadow: 0 1px 5px $grey;
}
.bi-eye-slash{
     margin-left:-27px;
    // cursor: pointer;
    // position: relative;
}


</style>

Answer 1

为避免添加更多标签，通常可以使用::before 和::after 来完成类似的行。
你可以这样做：

.seperator h5 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1em;
}

.seperator h5::before,
.seperator h5::after {
  content: "";
  display: block;
  flex-grow: 1;
  height: 1px;
  background: #ccc;
}

.seperator h5 span {
  padding: 0 2em;
}

<div class="seperator">
  <h5><span>OR</span></h5>
</div>