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%;
}