链接悬停:动画底部边框/下划线

Question

我已经知道这个下划线/底部边框动画很长时间了(小提琴：https://jsfiddle.net/0ou3o9rn/4/(，但我似乎无法弄清楚我必须如何正确设置我的代码样式......什么都没用。

.CSS：

.lists li {
    position: absolute;
    display:block;
    left: 0;
    top:90%;
    margin:0 auto;
    height: 2px;
    background-color: #000;
    width: 0%;
    transition: width 1s;}

.HTML：

<div class="lists"><ul>
<li><a href="/">link 1</a></li>
<li><a href="/">link 2</a></li>
<li><a href="/">link 3</a></li>
</ul></div>

例如，这不起作用，但是当我将鼠标悬停在li s/a s上时，我仍然希望出现动画下划线。谁能帮我？谢谢！

Answer 1

不需要额外的标记(无论如何伪也可以完成这项工作(，您可以简单地使用背景图像(或渐变(并使用background-size来扩展/缩小效果.background-position可用于设置效果可以开始的位置(下面的演示：左，中，右(

.lists li {
  display: inline-block;
  margin:0 1em;
}
.lists li a {
  display: block;
  padding: 3px 1em 3px;
  text-decoration: none;
  background: linear-gradient(to left, gold, gold) no-repeat bottom center;
  background-size: 0% 3px;
  /* will not show */
  transition: 0.25s;
}
.lists li a:hover {
  background-size: 100% 3px;
  /* will expand whole width */
}
/* some more styling ? */
.lists {
  background:gray;
  }
.lists li:first-of-type a {
  background-position: bottom left;
}
.lists li:last-of-type a {
  background-position: bottom right;
}
.lists li a {
  background-color: #222;
  color: #ace
}

<div class="lists">
  <ul>
    <li><a href="/">link 1</a>
    </li>
    <li><a href="/">link 2</a>
    </li>
    <li><a href="/">link 3</a>
    </li>
  </ul>
</div>

Answer 2

滑块

是一个高度为 2px 的框。最初块的宽度是 0px。当用户将鼠标悬停在 #name 上时，滑块的宽度将变为 100%。现在，css过渡应用于此宽度。所以，这个动画发生了。

    <div id="splash"> <span id="name">random title
        <div class="slider"></div>
        </span>
    </div>

    .slider {
        position: absolute;
        display:block;
        left: 0;
        top:90%;
        margin:0 auto;
        height: 2px;
        background-color: #000;
        width: 0%;
        transition: width 1s;
    }
    #name:hover > .slider {
        width: 100%;
    }
    #splash {
        width:100%;
        height:100%;
        background-color:#fff;
        z-index:999999;
        position:fixed;
    }
    #name {
        color:#000;
        font-family:'Arial-BoldMT';
        font-weight:bold;
        font-size:50px;
        letter-spacing: -2px;
        display:block;
        left: 50%;
        transform: translate(-50%, 0);
        position:absolute;
        top:40%;
        margin:0 auto;
    }