链接悬停：动画的底部边框/下划线 [英] Link hover: animated bottom border/underline

问题描述

我很早就知道了这种带下划线/边框的动画（小提琴： https：// jsfiddle.net/0ou3o9rn/4/ ），但我似乎无法找出如何正确设置代码样式……没有任何效果。

I've already known this underline/border-bottom animation for a long time (fiddle: https://jsfiddle.net/0ou3o9rn/4/), but I can't seem to find out how I'd have to style my codes correctly... Nothing works.

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。谁能帮我？谢谢！！

This for example doesn't work, but I still want an animated underline to appear when I hover over the lis/as. Can anyone help me? Thank you!

推荐答案

不需要额外的标记（pseudo还是可以完成这项工作的），您可以简单地使用background-图像（或渐变），并使用 background-size 扩展/缩小效果。background-position可用于设置效果的开始位置（以下演示：左，中，右）

No need of extra markup (pseudo would do the job too anyway ), you could simply use a background-image (or gradient) and use background-size to expand/shrink the effect.background-position can be sused to set where effect can start (demo below does : left, center, right)

.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>

这篇关于链接悬停：动画的底部边框/下划线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！