css 导航栏下划线跟随效果，默认第一个li为选中状态

本次主要是联系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;    /*选中项下一个下划线出线的方向，从左往右收线*/
    }