css当光标经过导航栏时显示下划线

html部分

 

 css

@charset "utf-8";

li,ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav-list{
    width: 1200px;
    height: auto;
    margin: 0 auto;
}
/* 给li标签设置浮动 */
.nav-list li{
    float: left;
    height: 37px;
    padding: 30px 40px;
    text-align: center;background-color: #ccc;
}
.nav-list a{
    text-decoration: none;
    color:#000;
}
/* 清除浮动 */
.cf::after{
    content: '';
    display: inline-block;
    clear: both;
}

/* 设置下边框 */
/* width设置为50%是相对于父元素a标签的宽度而变化的，
这里如果设置伪元素的位置用margin的话
会撑大li标签的高度，所以这里使用相对定位
 */
.nav-list a:hover::after{
    display:block;
    content: '';
    width: 50%;
    height: 3px;
    background-color: skyblue;
    position: relative;
    top: 6px;
    left: 20%;
}