查询目标网站菜单项下划线效果对应的CSS实现代码

你提到的站点菜单项下划线效果是通过CSS伪元素+transform过渡实现的，核心实现代码参考如下：

1. 基础HTML结构示例 #

<nav class="main-nav">
  <ul class="nav-list">
    <li class="nav-item"><a href="#" class="nav-link">首页</a></li>
    <li class="nav-item"><a href="#" class="nav-link">服务</a></li>
    <li class="nav-item"><a href="#" class="nav-link">案例</a></li>
    <li class="nav-item"><a href="#" class="nav-link">关于我们</a></li>
    <li class="nav-item"><a href="#" class="nav-link">联系我们</a></li>
  </ul>
</nav>

2. 核心CSS代码 #

/* 导航容器基础样式 */
.nav-list {
  list-style: none;
  display: flex;
  gap: 2rem;
  padding: 0;
  margin: 0;
}

/* 导航链接基础样式 */
.nav-link {
  position: relative;
  text-decoration: none;
  color: #1a1a1a;
  font-size: 1.1rem;
  padding: 0.5rem 0;
}

/* 下划线伪元素默认样式 */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #1e3a8a; /* 和目标站下划线深蓝色保持一致 */
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.3s ease-in-out;
}

/* 悬停时下划线展开效果 */
.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

3. 常用调整参数说明 #

• 下划线厚度：修改::after伪元素的height属性值
• 动画速度：修改transition属性中的0.3s参数，数值越大动画越慢
• 下划线颜色：修改::after伪元素的background-color属性值
• 固定当前页高亮：给当前页对应导航链接添加active类，新增如下样式即可：

.nav-link.active::after {
  transform: scaleX(1);
  transform-origin: left center;
}

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