[分享]css做下划线导航

CSS可以很方便地为导航栏添加下划线，让用户更直观地了解当前所在页面。

.nav{
  display:flex;
  justify-content:space-between;
  border-bottom:2px solid #000;
}
.nav a{
  text-decoration:none;
  padding-bottom:5px;
}
.nav a:hover{
  border-bottom:2px solid #000;
} 

首先，我们为整个导航栏设置一个容器，并设置其属性为display:flex;justify-content:space-between;以便将导航元素均匀分布在容器内。

然后，我们为每个导航元素的a标签设置padding-bottom:5px;，这样当用户hover到导航元素时，下划线可以完全填充该元素的宽度。另外，我们也将a标签的text-decoration属性设为none，去除默认的下划线。

最后，当用户hover到导航元素时，我们再为其设置一个下划线，鼠标离开时该下划线消失。

使用CSS做下划线导航只需要简单的几行代码，就可以为用户提供更好的导航体验。