如何让下划线在鼠标悬停时显示？

huangapple
go评论90阅读模式
英文:

How do I make an underline hover like this?

问题

以下是翻译好的部分：

我想在我的网站导航上制作一个CSS下划线动画，就像poosh.com上的那个一样。我不知道如何让只有导航项有下划线。希望你们明白我的意思。

我尝试了这个：

  1. nav ul {
  2.   display: inline-block;
  3.   position: relative;
  4.   color: #000000;
  5. }
  7. nav ul::after {
  8.   content: '';
  9.   position: relative;
  10.   width: 100%;
  11.   transform: scaleX(0);
  12.   height: 1px;
  13.   bottom: 12px;
  14.   left: 0;
  15.   background-color: #000000;
  16.   transform-origin: bottom left;
  17.   transition: transform 0.3s ease-out;
  18. }
  20. nav a:hover::after {
  21.   transform: scaleX(1);
  22.   transform-origin: bottom left;
  23. }

但它不起作用。

英文:

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:

  1. nav ul {
  2.   display: inline-block;
  3.   position: relative;
  4.   color: #000000;
  5. }
  7. nav ul::after {
  8.   content: '';
  9.   position: relative;
  10.   width: 100%;
  11.   transform: scaleX(0);
  12.   height: 1px;
  13.   bottom: 12px;
  14.   left: 0;
  15.   background-color: #000000;
  16.   transform-origin: bottom left;
  17.   transition: transform 0.3s ease-out;
  18. }
  20. nav a:hover::after {
  21.   transform: scaleX(1);
  22.   transform-origin: bottom left;
  23. }

but it doesn't work.

答案1

得分: 0

在ul后面要添加li，就像这样：

  1. nav ul li{
  2.   ...
  3. }
英文:

You have to li after ul like this:

  1. nav ul li{
  2.   ...
  3. }

答案2

得分: 0

if HTML代码如下:

  1. class="hover-underline-animation">YOUR TEXT HERE!

要实现这个效果的CSS是:

  1. .hover-underline-animation {
  2.   display: inline-block;
  3.   position: relative;
  4. }
  6. .hover-underline-animation:after {
  7.   content: '';
  8.   position: absolute;
  9.   transform: scaleX(0);
  10.   transform-origin: bottom right;
  11.   transition: transform 0.25s ease-out;
  12. }
  14. .hover-underline-animation:hover:after {
  15.   transform: scaleX(1);
  16.   transform-origin: bottom left;
  17. }
英文: 
  1. if html code is like --> 
  2. class="hover-underline-animation">YOUR TEXT HERE!
  3. the css to do that you want is -->
  4. .hover-underline-animation {
  5.   display: inline-block;
  6.   position: relative;
  7. }
  9. .hover-underline-animation:after {
  10.   content: '';
  11.   position: absolute;
  12.   transform: scaleX(0);
  13.   transform-origin: bottom right;
  14.   transition: transform 0.25s ease-out;
  15. }
  17. .hover-underline-animation:hover:after {
  18.   transform: scaleX(1);
  19.   transform-origin: bottom left;
  20. }

答案3

得分: 0

  1. nav ul {
  2.     display: inline-block;
  3.     position: relative;
  4.     color: #000000;
  5. }
  7. nav a {
  8.     position: relative;
  9.     text-decoration: none;
  10.     color: inherit;
  11. }
  13. nav a::before {
  14.     content: '';
  15.     position: absolute;
  16.     width: 100%;
  17.     transform: scaleX(0);
  18.     height: 1px;
  19.     bottom: -2px;
  20.     left: 0;
  21.     background-color: #000000;
  22.     transform-origin: bottom left;
  23.     transition: transform 0.3s ease-out;
  24. }
  26. nav a:hover::before {
  27.     transform: scaleX(1);
  28. }

更改内容：

  • 从 ul 中移除 ::after，我们希望在 a 标签上添加下划线。
  • 将 ::after 的 bottom 属性更改为 -2px，以便将下划线定位在文本正下方。
  • 从 nav a:hover::after 中移除 transform-origin 属性，因为它不需要用于动画。

示例 HTML：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Navigation menu with underline animation on hover</title>
  6.   </head>
  7.   <body>
  8.     <nav>
  9.       <ul>
  10.         <li><a href="#">Home</a></li>
  11.         <li><a href="#">About</a></li>
  12.         <li><a href="#">Services</a></li>
  13.         <li><a href="#">Contact</a></li>
  14.       </ul>
  15.     </nav>
  16.   </body>
  17. </html>

希望这有所帮助！

英文: 
  1. nav ul {
  2.         display: inline-block;
  3.         position: relative;
  4.         color: #000000;
  5.       }
  7.       nav a {
  8.         position: relative;
  9.         text-decoration: none;
  10.         color: inherit;
  11.       }
  13.       nav a::before {
  14.         content: &#39;&#39;;
  15.         position: absolute;
  16.         width: 100%;
  17.         transform: scaleX(0);
  18.         height: 1px;
  19.         bottom: -2px;
  20.         left: 0;
  21.         background-color: #000000;
  22.         transform-origin: bottom left;
  23.         transition: transform 0.3s ease-out;
  24.       }
  26.       nav a:hover::before {
  27.         transform: scaleX(1);
  28.       }

Changes made:

  • Removing the ::after from the ul, as we want to add the underline to the a tags instead.

  • Changing the bottom property of the ::after to -2px, as we want to position the underline just below the text.

  • Removing the transform-origin property from nav a:hover::after, as it's not needed for the animation.

Example HTML:

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3.   &lt;head&gt;
  4.     &lt;meta charset=&quot;utf-8&quot; /&gt;
  5.     &lt;title&gt;Navigation menu with underline animation on hover&lt;/title&gt;
  6.   &lt;/head&gt;
  7.   &lt;body&gt;
  8.     &lt;nav&gt;
  9.       &lt;ul&gt;
  10.         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
  11.         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
  12.         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;
  13.         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
  14.       &lt;/ul&gt;
  15.     &lt;/nav&gt;
  16.   &lt;/body&gt;
  17. &lt;/html&gt;

Hope this helps!

答案4

得分: 0

  1.   nav a {
  2.       position: relative;
  3.       text-decoration: none;
  4.   }
  6.   nav a::after {
  7.       content: '';
  8.       position: absolute;
  9.       left: 0;
  10.       bottom: -2px;
  11.       width: 0%;
  12.       height: 2px;
  13.       background-color: #000;
  14.       transition: width 0.3s ease-in-out;
  15.   }
  17.   nav a:hover::after {
  18.       width: 100%;
  19.   }
英文:

Here we go:

  1.   nav a {
  2.       position: relative;
  3.       text-decoration: none;
  5.   }
  7.   nav a::after {
  8.       content: &#39;&#39;;
  9.       position: absolute;
  10.       left: 0;
  11.       bottom: -2px;
  12.       width: 0%;
  13.       height: 2px;
  14.       background-color: #000;
  15.       transition: width 0.3s ease-in-out;
  16.   }
  18.   nav a:hover::after {
  19.       width: 100%;
  20.   }

huangapple
  • 本文由 发表于 2023年3月31日 20:45:42
  • 转载请务必保留本文链接：https://go.coder-hub.com/75898697.html
  • css
  • hover
  • html
  • underline
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定