我正在研究导航样式，但我被这个问题困住了。在鼠标悬停时，我想让文本条在文本下面，而不是在顶部。
下面是代码: 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%;
}
下面是codesandbox中的代码: https://codesandbox.io/s/navigation-menu-hover-animation-forked-i7p330
您只需要将行定位在bottom: 0;并将position: relative;添加到父元素。
* {
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 {
position: relative;
display: flex;
font-size: 2rem;
transition: ease-in-out 0.1ms;
}
.text-nav::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0%;
background: #50469e;
transition: all 0.4s ease;
}
.text-nav:hover::before {
width: 100%;
}<div>
<span class="text-nav">Home</span>
</div>