本次主要是联系css实现导航栏下划线跟随效果
HTML：
<ul id="list"><li class="current_li"><a href="#" class="current">全部</a></li><li><a href="#">公司党委</a></li><li><a href="#">国内新闻</a></li><li><a href="#">国际新闻</a></li></ul>
js：主要是为了刷新页面，让第一个li默认有下划线和选中效果
<script type="text/javascript">$("#list li").click(function(){$("#list li").removeClass("current_li");$("#list li a").removeClass("current");})</script>
css：
/*下划线跟随*/ul{display: flex;position: initial;}li{position: relative;padding: 1em 2em;font-size: 12px;list-style: none;white-space:nowrap;width: 25%;text-align: center;}li.current_li{list-style-type:none;border-bottom:2px solid red;padding-bottom: 2px;}a:active, a:hover, a.current {color: #ff231c;}li::after{content: '';position: absolute;bottom: 0;width: 0;height: 2px;color: #ff231c;background-color: #ff231c;transition: .5s all linear;}li:hover::after{width: 100%;}li::after{left: 100%;/*选中项上一个下划线收回的方向，从左往右收线*/}li:hover::after{left: 0;/*选中项下划线出线的方向，从左往右出线*/}li:hover ~ li::after {left: 0; /*选中项下一个下划线出线的方向，从左往右收线*/}
