请求实现导航栏链接下方绿色下划线效果（附当前CSS/HTML代码）

虽然你没贴出具体的HTML和CSS代码，但我可以基于常见的导航栏结构给你几个通用的可行思路，你可以根据自己的代码调整：

方案1：使用CSS text-decoration 属性（简单直接） #

如果只需要基础的下划线效果，这是最快的方式，直接给导航链接设置下划线颜色、粗细：

.nav-link {
  /* 移除默认下划线（如果有的话） */
  text-decoration: none;
  /* 添加自定义下划线 */
  text-decoration: underline;
  text-decoration-color: #2ecc71; /* 清新绿色 */
  text-decoration-thickness: 2px; /* 下划线粗细 */
  text-underline-offset: 4px; /* 下划线和文字的间距，避免贴得太近 */
}

/* 可选：hover时增强视觉反馈 */
.nav-link:hover {
  text-decoration-thickness: 3px;
}

这个方案依赖CSS原生属性，代码简洁，兼容性也不错（现代浏览器都支持）。

方案2：使用 border-bottom + 伪元素实现高度自定义的下划线 #

如果需要更精准控制下划线的宽度、位置（比如只占链接文字的一部分，或者添加动画效果），用伪元素的方式会更灵活：

.nav-link {
  text-decoration: none;
  color: #333; /* 链接文字默认颜色 */
  position: relative;
  padding-bottom: 4px; /* 给下划线预留空间 */
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%; /* 下划线宽度与文字一致 */
  height: 2px;
  background-color: #27ae60; /* 偏深的绿色 */
  /* 可选：添加hover过渡动画 */
  transition: width 0.3s ease;
}

/* 示例：hover时下划线从左到右展开 */
.nav-link:hover::after {
  width: 100%; /* 初始可以设为0，hover时变100%，实现动画 */
  /* 或者改成120%，让下划线超出文字范围，增强视觉效果 */
}

这种方式可以玩出很多花样，比如下划线只在hover时出现、下划线长度随hover变化等。

方案3：给当前激活的导航链接设置特殊下划线 #

如果需要区分当前页面的导航链接，可以给激活状态的链接加一个额外类（比如active），然后单独设置样式：

.nav-link.active::after {
  background-color: #16a085; /* 更深的绿色，突出激活状态 */
  height: 3px;
}

对应HTML里给当前页面的导航链接加上active类：

<nav>
  <a href="#" class="nav-link active">首页</a>
  <a href="#" class="nav-link">关于我们</a>
  <a href="#" class="nav-link">服务</a>
</nav>

小提示 #

• 确保导航链接的display属性为inline-block或block，这样border-bottom和伪元素的位置会更可控
• 如果你的导航栏有内置的padding或margin，记得调整padding-bottom或者伪元素的bottom值来适配整体布局

内容的提问来源于stack exchange，提问作者jskrtsth