这个下滑条的样式要怎么写 使用绝对定位到这个下划线上么？

还有一个问题就是 目前写的样式 布局有点问题 都是绝对定位 浏览器窗口改变之后 不是居中 求教要怎么更改

 * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-image: url('./img/login_bg.jpg');
      width: 100%;
      height: 100%;
    }

    .section {
      background: url('./img/login_main.png') no-repeat center top;
      height: 800px;
      width: 100%;
    }

    .login-title {
      position: absolute;
      margin-top: 80px;
      background: url(./img/login_title.png) no-repeat center top;
      width: 100%;
      height: 80px;
    }
    .title{
      color: white;
      margin-top: 100px
    }
    .all{
      text-align: center;
    }
    .nav{
      margin-top: 220px;
    display: flex;
    position: absolute;
    left: 45%;
    }
  </style>

 <div class="section">
    <div class="all">
      <div class="login-title">
        <div class="title">全新LIMS实验室的人、机、法、料、环的全过程闭环管理</div>
      </div>
      <div class="nav">
          <a class="login on"><img src='./img/btn_user.png'> <div>用户名密码登陆</div></a>
          <a class="login"><img src='./img/btn_jmg.png'> <div>加密狗登陆</div></a>
      </div>
    </div>
  </div>