<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
   </head>
   <style type="text/css">
      *{
         margin: 0;
         padding: 0;
         list-style: none;
      }
      
      .nav{
         width: 1000px;
         margin: 50px auto;
         font: 14px/40px "微软雅黑";
         text-align: center;
      }
      .nav li{
         width: 100px;
         float: left;
      }
      .nav a{
         display: block;
         text-decoration: none;
         background: pink;
         color: #fff;
      }
      
      .nav li:hover a{
         background: deepskyblue;
      }
      
      .nav li:after{
         content: "";
         display: block;
         border-bottom: 2px solid orange;                       //主要是这里
         width: 0;
         transition: .5s;
         margin: 0 auto;
      }
      
      .nav li:hover:after{                                      //主要是这里

         width: 100%;
      }
      
   </style>
   <body>
      <ul class="nav">
         <li><a href="#">导航1</a></li>
         <li><a href="#">导航2</a></li>
         <li><a href="#">导航3</a></li>
         <li><a href="#">导航4</a></li>
         <li><a href="#">导航5</a></li>
         <li><a href="#">导航6</a></li>
         <li><a href="#">导航7</a></li>
         <li><a href="#">导航8</a></li>
      </ul>
   </body>
</html>