<!DOCTYPE html>
<html>
  
  <head>
    <title></title>
    <style type="text/css">
      li {
     float: left;
       display: block;
        padding: 10px;
        position: relative;
        border-bottom: 0px solid #000;
      }
       li::before {
         content: "";
         position: absolute;
         top: 0;
         left: 100%;
         width: 0;
         height: 100%;
         border-bottom: 2px solid #000;
         transition: 0.2s all linear;
       }

       li:hover::before {
         width: 100%;
         left: 0;
       }

       li:hover ~ li::before {
         left: 0;
       }
    </style>
  </head>
  
  <body>
    <ul>
      <li>CSS导航栏下划线跟随效果</li>
      <li>CSS导航栏下划线跟随效果</li>
      <li>CSS导航栏下划线跟随效果</li>
      <li>CSS导航栏下划线跟随效果</li>
  </body>

</html>