css怎么在导航栏下加横线

CSS的border属性是用来渲染边框的，在导航栏下添加横线，可以使用border-bottom属性来实现。

.nav {
      border-bottom: 2px solid #000;
}

这段代码会给class为nav的导航栏添加一个2像素宽且黑色的实线边框。你可以根据需要调整边框样式、粗细和颜色。

如果你要让横线仅出现在导航栏上方的菜单项上，你可以给菜单项的链接添加一个:hover伪类：

.nav li a:hover {
      border-bottom: 2px solid #000;
}

这样，当鼠标悬停在菜单项上时，链接的底部就会出现一条2像素宽的横线。

你也可以使用伪元素:before或:after来添加横线。例如，给导航栏的每个菜单项添加一个下划线：

.nav li a:before {
      content: "";
      display: block;
      width: 100%;
      border-bottom: 2px solid #000;
      transform: scaleX(0);
      transition: transform 0.3s ease-in-out;
}
.nav li a:hover:before {
      transform: scaleX(1);
}
    

这个效果通过制造一个看不见的块元素，并让它的宽度延伸到父元素的宽度来实现。当鼠标悬停在链接上时，设置transform: scaleX(1)让块元素沿着x轴拉伸并变得可见。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！