英文:
How do I make an underline hover like this?
问题
以下是翻译好的部分：
我想在我的网站导航上制作一个CSS下划线动画，就像poosh.com上的那个一样。我不知道如何让只有导航项有下划线。希望你们明白我的意思。
我尝试了这个：
nav ul {
display: inline-block;
position: relative;
color: #000000;
}
nav ul::after {
content: '';
position: relative;
width: 100%;
transform: scaleX(0);
height: 1px;
bottom: 12px;
left: 0;
background-color: #000000;
transform-origin: bottom left;
transition: transform 0.3s ease-out;
}
nav a:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
但它不起作用。
英文:
I want to make a CSS underline animation on my website's navigation, like the one on poosh.com. I have no idea how I make it so that only the navigation items are underlined. Hope y'all understand what I mean.
I tried this:
nav ul {
display: inline-block;
position: relative;
color: #000000;
}
nav ul::after {
content: '';
position: relative;
width: 100%;
transform: scaleX(0);
height: 1px;
bottom: 12px;
left: 0;
background-color: #000000;
transform-origin: bottom left;
transition: transform 0.3s ease-out;
}
nav a:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
but it doesn't work.
答案1
得分: 0
在ul后面要添加li，就像这样：
nav ul li{
...
}
英文:
You have to li after ul like this:
nav ul li{
...
}
答案2
得分: 0
if HTML代码如下:
class="hover-underline-animation">YOUR TEXT HERE!
要实现这个效果的CSS是:
.hover-underline-animation {
display: inline-block;
position: relative;
}
.hover-underline-animation:after {
content: '';
position: absolute;
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
英文:
if html code is like -->
class="hover-underline-animation">YOUR TEXT HERE!
the css to do that you want is -->
.hover-underline-animation {
display: inline-block;
position: relative;
}
.hover-underline-animation:after {
content: '';
position: absolute;
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
答案3
得分: 0
nav ul {
display: inline-block;
position: relative;
color: #000000;
}
nav a {
position: relative;
text-decoration: none;
color: inherit;
}
nav a::before {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 1px;
bottom: -2px;
left: 0;
background-color: #000000;
transform-origin: bottom left;
transition: transform 0.3s ease-out;
}
nav a:hover::before {
transform: scaleX(1);
}
更改内容：
- 从
ul中移除::after，我们希望在a标签上添加下划线。 - 将
::after的bottom属性更改为-2px，以便将下划线定位在文本正下方。 - 从
nav a:hover::after中移除transform-origin属性，因为它不需要用于动画。
示例 HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Navigation menu with underline animation on hover</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
希望这有所帮助！
英文:
nav ul {
display: inline-block;
position: relative;
color: #000000;
}
nav a {
position: relative;
text-decoration: none;
color: inherit;
}
nav a::before {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 1px;
bottom: -2px;
left: 0;
background-color: #000000;
transform-origin: bottom left;
transition: transform 0.3s ease-out;
}
nav a:hover::before {
transform: scaleX(1);
}
Changes made:
-
Removing the
::afterfrom theul, as we want to add the underline to theatags instead. -
Changing the bottom property of the
::afterto-2px, as we want to position the underline just below the text. -
Removing the
transform-originproperty fromnav a:hover::after, as it's not needed for the animation.
Example HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Navigation menu with underline animation on hover</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
Hope this helps!
答案4
得分: 0
nav a {
position: relative;
text-decoration: none;
}
nav a::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 0%;
height: 2px;
background-color: #000;
transition: width 0.3s ease-in-out;
}
nav a:hover::after {
width: 100%;
}
英文:
Here we go:
nav a {
position: relative;
text-decoration: none;
}
nav a::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 0%;
height: 2px;
background-color: #000;
transition: width 0.3s ease-in-out;
}
nav a:hover::after {
width: 100%;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论