css下划线文字导航

在网页设计中，导航栏是一个非常重要的元素。下划线文字导航是一种常见的导航栏样式，它会给用户带来清晰的导航指引。下面我们来一步步实现 CSS 下划线文字导航。

/* HTML 代码 */
<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">服务项目</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

/* CSS 代码 */
nav {
  background-color: #fff;
  height: 50px;
  border-bottom: 2px solid #ccc;
  text-align: center;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin: 0 30px;
}

nav a {
  display: inline-block;
  position: relative;
  padding-bottom: 10px;
  text-decoration: none;
  color: #666;
}

nav a::after {
  content: ';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #f00;
  transform: scaleX(0);
  transform-origin: center;
  transition: all 0.3s;
}

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

上述代码实现了一个简单的下划线文字导航。我们首先设置了导航栏的样式和元素的布局，然后设置了我们要用到的伪元素 ::after，并通过设置 transform 和 transition 属性来达到下划线动画的效果。

以上就是 CSS 下划线文字导航的实现方法。此例只用了最基础的样式和属性，如果你想要更加美观和创意的下划线样式，可以继续探索更多实现方法。