【前端案例】04 - 实现导航栏底部边框中间向两边延伸

1. 页面结构：

<div class="nav">
    <ul>
      <li><a href="#">导航子项</a></li>
      <li><a href="#">导航子项</a></li>
      <li><a href="#">导航子项</a></li>
      <li><a href="#">导航子项</a></li>
      <li><a href="#">导航子项</a></li>
      <li><a href="#">导航子项</a></li>
    </ul>
</div>

2. 页面样式:

<style>

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .nav ul li {
      float: left;
      padding: 20px;
      position: relative;
    }

    a {
      text-decoration: none;
      color: #000;
    }

    li:after {
      content:'';
      position:absolute;
      border-bottom: 1px solid #000;
      left:51%;
      right:51%;
      bottom:0;
      transition: all .5s linear;
    }

    li:hover:after {
      left:0;
      right:0;
    }

  </style>