使用 Elementor CSS 的悬停下划线效果答案

【问题标题】：Hover underline effect with Elementor CSS使用 Elementor CSS 的悬停下划线效果
【发布时间】：2021-10-10 13:17:30
【问题描述】：

我一直在为这个问题撞墙。我尝试使用这行代码使用 Elementor 使用 CSS 创建悬停效果的下划线。我已经尝试使用按钮小部件和文本编辑器小部件，但似乎根本无法让它工作。我错过了什么？任何帮助都会非常有帮助。

谢谢

:
.underline {
  display: inline;
  position: relative;
  overflow: hidden;
}
.underline:after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: -5px;
  background: #000;
  height: 4px;
  transition-property: left right;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.underline:hover:after,
.underline:focus:after,
.underline:active:after {
  right: 0;
}

【问题讨论】：

欢迎来到 Stack Overflow！寻求代码帮助的问题必须包括在问题本身最好是在Stack Snippet 中重现它所需的最短代码。见How to create a Minimal, Reproducible Example
也就是说不要向左或向右过渡，将宽度从 100% 过渡到 0。

标签： css elementor

【解决方案1】：

您的代码几乎可以工作 - 问题在于转换属性。你有左右这不是合法的CSS。实际上，您只想转换右侧属性，下划线始终锚定在左侧。

.underline {
  display: inline;
  position: relative;
  overflow: hidden;
}

.underline::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: -5px;
  background: #000;
  height: 4px;
  transition-property: right;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}

.underline:hover::after,
.underline:focus:after,
.underline:active:after {
  right: 0;
}

&lt;div class="underline"&gt;Hover over me&lt;/div&gt;

通过相关验证器运行代码会很有帮助。在这种情况下，我使用了发现错误的 W3C CSS 验证器。

虽然您可以按照您的方式转换（动画）正确的属性，但使用缩放或平移等转换来缩小/增长或移动事物通常会更高效（在 CPU/GPU 使用意义上）。

【讨论】：