【前端案例】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>
  1. 页面样式:
<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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容