css导航下划线设置

CSS导航下划线设置是网页设计中经常使用的一种效果，它可以让用户更清晰地知道当前所处的页面状态。下划线可以通过CSS中的伪类和样式设置来实现，下面我们来详细介绍一下。

.nav{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.nav li{
  margin-right: 20px;
}

.nav li a{
  position: relative;
}

.nav li a:after{
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #f00;
  transform: scaleX(0);
  transition: transform 0.3s;
}

.nav li a:hover:after{
  transform: scaleX(1);
}

在上面的代码中，我们通过设置伪类和样式来实现下划线效果。首先，我们设置了 `.nav` 的样式，将其设为块级元素，并且将列表的样式清空。接着，我们对每个列表项设置了 `margin-right: 20px` 的样式，这样可以让每个链接项之间产生一定的间距。然后，我们对链接(`a`)设置了 `position: relative` 样式，这一步是为了让下划线相对于链接进行定位。

接下来，我们使用了 `:after` 伪类来添加下划线的样式，设置其为绝对定位，并将其位置设置在链接的底部，并且宽度为100%。高度为2px，背景颜色为#f00。但是，在初始时我们将其设置为 `transform: scaleX(0)`，这样下划线是不可见的。我们使用 `transition` 属性来使下划线在鼠标移上链接时缓慢的出现。当链接处于悬浮状态时，我们将下划线的 `transform` 属性转换为 `scaleX(1)`，这样下划线就完整地显示出来了。

上面的代码只是实现下划线效果的一种实现方式，当然，在实际的开发过程中，我们还可以采用其他方法来实现相似的效果。下划线的颜色、宽度、高度、位置等都可以根据需要进行修改。