如何实现从左到右的下划线动画？

Question

我正在尝试复制Uber设计网站中的这个过渡效果：

但问题在于，我卡在了如何实现反向过渡效果：

.un {
  display: inline-block;
}

.un:after {
  content: '';
  width: 0px;
  height: 2px;
  display: block;
  background: black;
  transition: 300ms;
}

.un:hover:after {
  width: 100%;

<span class="un">Underlined Text</span>

- DanielX

Answer 1

您可以使用渐变并延迟调整background-position来获得这样的效果：

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(#000 0 0);
  background-position: 0 100%; /*OR bottom left*/
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition:
    background-size 0.3s,
    background-position 0s 0.3s; /*change after the size immediately*/
}

.un:hover {
  background-position: 100% 100%; /*OR bottom right*/
  background-size: 100% 2px;
}

<span class="un">Underlined Text</span>

如果您想要在鼠标悬停时进行连续的动画，可以尝试这个：

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(#000 0 0);
  background-position: right -100% bottom 0;
  background-size: 200% 2px;
  background-repeat: no-repeat;
}

.un:hover {
  background-position: left -100% bottom 0;
  transition: background-position 0.5s;
}

<span class="un">Underlined Text</span>

您可以查看此答案以了解有关如何计算不同值的更多详细信息：在线性渐变中使用百分比值和背景位置

---

另一种动画

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(to right, #000 33%,#0000 33% 66%,#000 66%);
  background-position: right bottom;
  background-size: 300% 2px;
  background-repeat: no-repeat;
}

.un:hover {
  background-position: left bottom;
  transition: background-position 0.5s;
}

<span class="un">Underlined Text</span>

让我们不要忘记基础:

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(#000 0 0);
  background-position: right bottom; /* OR left bottom*/
  background-size: 100% 2px;
  background-repeat: no-repeat;
  transition: background-size 0.5s;
}

.un:hover {
  background-size: 0% 2px;
}

<span class="un">Underlined Text</span>

您可以在此处找到更多技术: https://dev.to/afif/100-underline-overlay-animation-the-ultimate-css-collection-4p40

另一篇相关文章：使用背景属性的酷炫悬停效果

- Temani Afif

---

我注意到当有换行时，下划线只出现在底部。有什么修复方法让它跟随换行？ - FluffyBeing

@FluffyBeing 移除 inline-block。 - Temani Afif

Answer 2

您需要将您的伪元素绝对定位，并使用:not选择器来复制此效果。

.un {
  display: inline-block;
  position: relative;
}

.un:after {
  content: '';
  width: 0px;
  height: 2px;
  position: absolute;
  top: 100%;
  left: 0;
  background: black;
  transition: 300ms;
}

.un:hover:after {
  width: 100%;
}

.un:not(:hover):after {
  right: 0;
  left: auto;
}

<span class="un">Underlined Text</span>

- Quentin Veron

---

not(hover) 部分中的 left: auto 是做什么用的？ - mrid

你将如何完成这个CSS，在点击时运行（例如在移动设备上）？ - DanielX

附加一个点击事件并使用类而不是悬停选择器。 - Quentin Veron

Answer 3

所有解决办法中最简单的一个，不需要使用:not选择器或渐变，只需在代码中切换右侧和左侧位置即可。

span.un {
  position: relative;
}

span.un::after {
  position: absolute;
  content: "";
  background: black;
  bottom: 0;
  right: 0;
  height: 2px;
  width: 0%;
  transition: 300ms ease-in-out;
}

span.un:hover::after {
  width: 100%;
  left: 0;
}

<span class="un">Underline me</span>

- XDOLK009