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

本次主要是联系css实现导航栏下划线跟随效果

HTML：

js：主要是为了刷新页面，让第一个li默认有下划线和选中效果

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; /*选中项下一个下划线出线的方向，从左往右收线*/

}