如何仅使用CSS实现当前访问页面对应的导航链接下划线效果

仅用CSS完全可以实现该需求，不需要引入JavaScript，下面是两种常用的落地方式：

方案1：添加当前页专属类（兼容性最好，全浏览器支持） #

这是工业界最通用的实现方案：

• 渲染导航栏时，给当前页面对应的导航链接额外添加一个自定义类，例如nav-current，示例HTML结构如下：

<nav class="nav-wrap">
  <a href="/index.html" class="nav-link nav-current">首页</a>
  <a href="/about.html" class="nav-link">关于我们</a>
  <a href="/product.html" class="nav-link">产品中心</a>
</nav>

• 补充对应CSS规则即可：

/* 普通导航链接默认样式 */
.nav-link {
  text-decoration: none;
  padding: 0 16px;
  color: #333;
}
/* 当前页导航链接添加下划线 */
.nav-current {
  text-decoration: underline;
  /* 可自定义下划线样式 */
  text-decoration-color: #165DFF;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

如果是静态站点，你可以直接在每个页面的对应导航标签上手动加类；如果是动态站点，由后端渲染逻辑判断当前路径后自动加类即可。

方案2：通过页面标识匹配（无需修改导航HTML结构） #

如果不想单独给导航加类，也可以给每个页面的body标签添加对应页面标识类，比如首页加page-index、关于我们页加page-about，然后在公共CSS里统一写规则：

.page-index .nav-link[href="/index.html"],
.page-about .nav-link[href="/about.html"] {
  text-decoration: underline;
  /* 下划线自定义样式同上 */
}

注意不要使用:visited伪类实现该效果，该伪类会匹配所有用户历史访问过的链接，无法做到仅高亮当前页的导航。

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