2023年3月31日 20:45:42go评论68阅读模式

英文:

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: &#39;&#39;;
  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 --&gt; 
class=&quot;hover-underline-animation&quot;&gt;YOUR TEXT HERE!
the css to do that you want is --&gt;
.hover-underline-animation {
  display: inline-block;
  position: relative;
}

.hover-underline-animation:after {
  content: &#39;&#39;;
  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: &#39;&#39;;
        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 ::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:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot; /&gt;
    &lt;title&gt;Navigation menu with underline animation on hover&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;nav&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/body&gt;
&lt;/html&gt;

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: &#39;&#39;;
      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%;
  }

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

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

问题

答案1

答案2

答案3

答案4

禁用空的


确定