链接上的下划线动画

Question

我想在链接上制作下划线动画

这是我的html

<header>
        <div class="title">
            <p>feldman</p>
        </div>
        <nav>
          <a href="intro.html">Intro</a>
          <a href="about.html">About</a>
          <a href="fieldman.html">Services</a>
          <a href="project.html">Project</a>
          <a href="contact.html">Contact</a>
           
        </nav>
        
           </header> 

我的CSS：

a::after{
    content: "";
    position: absolute;
    width: 0%;
    height: 1px;
    display: block;
    background-color: black;
    transition: width 0.2s ease-in-out;
}

a:hover:after{
 width: 100%;   
}

问题是当我把光标放在链接上时 所有链接都带下划线

我想要一个解决方案来解决下划线应该只在一个链接上的问题

现在我的CSS：

 nav a{
        color: black;
        text-decoration: none;
        margin: 6px;
        width: calc(100%/5);
        padding: 3px  4px  3px  5px ;
        line-height:1;
        position: relative;
        display: inline-block;
        }
        
        nav{
            margin-top: 9px;
            margin-right: 18px;
           
            width: 40%;
            height: 75%;
           display: flex;
           justify-content: center;
           margin: auto 10px;
        }

        header{
            display: flex;
            justify-content: flex-end;
          }

Answer 1

显然还有一些其他样式未包含在您的代码片段中，但至少您需要向锚标记添加

position: relative

以便

::after

伪元素应用绝对位置相对于

<a>

而不是最近定位的祖先是什么。

您还需要在锚点上指定

display: inline-block

，以便它们能够正确地处理注入的内容。

a {
  position: relative;
  display: inline-block;
}

JS小提琴在这里

输出：

更新以反映编辑后的问题

因为你在

<a>

样式中有填充，你可以在你的

::after

样式中乱用偏移量（可能不是一个好主意，然后需要在两个地方进行任何更改），或者只是引入一个包装元素围绕文本，例如

  <a href="intro.html"><span class="label">Intro</span></a>
  <a href="about.html"><span class="label">About</span></a>
  <!-- etc -->

然后将

display

/

position

样式应用于

.label

元素，并更新您的伪元素以挂起

.label

而不是锚点。

JS小提琴在这里

Answer 2

您可以尝试将链接放在 ul 标签中，然后使用 ul { display: flex; 修改 css；弹性包装：包装； justify-content: left;} 并改变宽度 %.