CSS伪类实现中间文字两边横线效果

来源：互联网发布：vr 制作软件编辑：程序博客网时间：2024/05/02 01:14

利用CSS伪类实现中间文字两边横线效果

效果图：

实现代码：

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>CSS伪类实现中间文字两边横线效果</title>  <style>    body {      margin: 0;    }    .login_content {      position: absolute;      text-align: center;      min-width: 450px;    }    .login_content div {      font: 400 20px Helvetica, Arial, sans-serif;      line-height: 20px;    }    /*CSS伪类用法*/    .login_content div:after, .login_content div:before {      background: #000000;      content: "";      height: 1px;      position: absolute;      top: 50%;      width: 20%;    }    /*调整背景横线的左右距离*/    .login_content div:before {      left: 0;    }    .login_content div:after {      right: 0;    }  </style></head><body><div class="login_content">  <div>中间文字，两边横线</div></div></body></html>

阅读全文

4 0