如何将导航文本hover时的下划线从顶部移至底部？

问题描述 #

我在设计导航样式时遇到问题：鼠标悬停在文本上时，下划线显示在文本顶部，希望调整到文本下方。相关代码如下：

HTML代码

<!DOCTYPE html>
<!-- Created by CodingLab |www.youtube.com/c/CodingLabYT-->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <!--<title> All Navigation Menu Hover Animation | CodingLab </title>-->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div>
      <span class="text-nav">Home</span>
    </div>
  </body>
</html>

CSS代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c1f7f5;
}

.text-nav {
  display: flex;
  font-size: 2rem;
  transition: ease-in-out 0.1ms;
}

.text-nav::before {
  content: "";
  position: absolute;
  left: 0;
  height: 2px;
  width: 0%;
  background: #50469e;
  transition: all 0.4s ease;
}
.text-nav:hover::before {
  width: 100%;
}

解决方案 #

问题根源在于：

• 父元素 .text-nav 未设置相对定位，导致伪元素的绝对定位参考对象是整个文档而非文本容器；
• 伪元素没有设置垂直位置，默认会对齐到父元素顶部。

修改后的CSS代码如下：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c1f7f5;
}

.text-nav {
  display: flex;
  font-size: 2rem;
  transition: ease-in-out 0.1ms;
  position: relative; /* 添加相对定位，让伪元素基于此定位 */
}

.text-nav::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px; /* 将下划线定位到文本下方，可调整数值改变间距 */
  height: 2px;
  width: 0%;
  background: #50469e;
  transition: all 0.4s ease;
}
.text-nav:hover::before {
  width: 100%;
}

说明 #

1. 添加 position: relative 到 .text-nav，确保伪元素的绝对定位以文本容器为基准，保证下划线与文本对齐；
2. 设置 bottom: -4px 调整下划线的垂直位置，你可以根据需求修改这个数值来调整下划线和文本之间的距离。

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