用伪类实现中间文字两边横线

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .line {
        height: 60px;
        text-align: center;
        line-height: 60px;
        font-size: 24px;
        position: relative;
      }
      .line::after {
        content: '';
        height: 1px;
        background-color: blue;
        width: 45%;
        position: absolute;
        top: 30px;
        right: 0;
      }
      .line::before {
        content: '';
        height: 1px;
        background-color: red;
        width: 45%;
        position: absolute;
        top: 30px;
        left: 0; //这个属性非常重要
      }
    </style>
  </head>
  <body>
    <div class="line">我是中间文字</div>
  </body>
</html>

来源：oschina

链接：https://my.oschina.net/u/4004801/blog/4287529

标签

RED

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!