如何使用 CSS 从下到上滑动伪类下划线？答案

【问题标题】：How to make a pseudo-class underline swipe from bottom to top with CSS?如何使用 CSS 从下到上滑动伪类下划线？
【发布时间】：2021-09-19 01:19:29
【问题描述】：

我是 CSS 的初学者大约一个星期。这是我关于堆栈溢出的第一个问题。希望我以正确的方式提问。我很高兴收到任何更正。

问题

我使用伪类来制作悬停时变粗的下划线。我想让它从下到上滑动，而它从上到下滑动。我怎样才能做到？

我确实搜索了类似的问题，但最终找到了块元素（渐变等）。非常感谢！

Here is my code on CodePen.

a {
  text-decoration: none;
  color: teal;
}

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

a::after {
  content: "";
  display: block;
  height: 0.1rem;
  
  transform: rotate(0.5deg);
  background-color: #20c997; /* teal */
  opacity: 0.3;
  transition: height 0.3s;
}

a:hover::after {
  height: 0.5rem;
}

【问题讨论】：

绝对定位通过 top:0/top:100% 进行过渡可能吗？
我想我找到了一个可行但不完美的答案。（现在已经很晚了，但我就是睡不着，所以我一直在尝试 XD）。这是代码的第 2 版：link。问题是，如果你仔细观察，下划线会在进行过渡时颤抖。
感谢@G-Cyrillus，我看不到它的变化...我可能把它们放在错误的地方？我只是碰巧发现旋转 181 度而不是 1 度使颤抖比以前更温和。也许它使下划线“自下而上”而不是“站立”？哈哈new code here
我看不出有什么不同，我不确定预期的结果。是否应该看到下划线，是否应该在鼠标悬停后从底部到顶部生长并在鼠标离开后返回？滑动，还是应该像屏幕滑动器一样移动？（旋转）

标签： html css transition underline

【解决方案1】：

您只需要将下划线absolute 定位到链接底部。左右偏移应设置为 0 以增长到整个链接宽度（或者您可以只设置width: 100%;）

a {
  text-decoration: none;
  color: teal;
}

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

a::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.1rem;
  background-color: #20c997; /* teal */
  opacity: 0.3;
  transition: height 0.3s;
}

a:hover::after {
  height: 0.5rem;
}

&lt;a href="#"&gt;A link text with a animated underline&lt;/a&gt;

【讨论】：