tabs 底部小短线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            list-style: none;
            float: left;
            list-style: none;
            position: relative;
            cursor: pointer;
        }
        a{
            display: block;
            padding: 0 22px;
            height: 50px;
        }
        a::after{
            content: "";
            display: inline-block;
            position: absolute;
            bottom: 15px;
            left: calc(50% - 7px);
            width: 14px;
            height: 2px;
            background: #409eff;
        }
    </style>
</head>
<body>
  <ul>
      <li><a>111</a></li>
      <li><a>222</a></li>
      <li><a>333</a></li>
  </ul>
</body>
</html>
版权声明：本文为panhuanqin原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。