<!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>