html 导航栏下划线

要在 HTML 导航栏下方添加下划线，你可以使用 CSS 来实现。

首先，在 HTML 中创建导航栏的结构，例如使用 `<ul>` 和 `<li>` 元素创建一个无序列表。

<ul class="navbar">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

然后，在 CSS 中为导航栏的链接设置样式，包括添加下划线的效果。

.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navbar li {
  display: inline;
}

.navbar li a {
  text-decoration: none;
  position: relative;
}

.navbar li a:after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000; /* 下划线颜色 */
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

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

上述 CSS 样式中，通过使用 `:after` 伪元素来为链接添加下划线。当鼠标悬停在链接上时，下划线会显示出来。

你可以根据需要调整下划线的颜色、高度和动画效果等。