11-[案例]利用伪对象实现横线

需求：实现网站登录页中常用的分割线效果

知识点：伪对象选择器，::before，::after

<div>
    <p><input type="text" name="" id="" placeholder="用户名"></p>
    <p><input type="password" name="" id="" placeholder="密码"></p>
    <p class="text">其他登录方式</p>
</div>

div {
    width: 300px;
    height: 400px;
    border: 1px solid #000;
    margin: 100px auto;
}

p {
    text-align: center;
}

.text {
    margin-top: 23px;
    position: relative;
}

.text::before {
    content: "";
    width: 20px;
    height: 2px;
    background: #ccc;
    position: absolute;
    left: 40px;
    top: 10px;
}

.text::after {
    content: "";
    width: 20px;
    height: 2px;
    background: #ccc;
    position: absolute;
    right: 40px;
    top: 10px;
}