Link 动画悬停上的下划线和箭头

Question

我正在拼命尝试在我的链接上创建类似于此 gif 的动画。

我正在使用以下 html（wordpress 上的元素）：

<a href="#" class="elementor-button-link elementor-button elementor-size-sm">
    <span class="elementor-button-content-wrapper">
        <span class="elementor-button-icon elementor-align-icon-left">
            <i aria-hidden="true" class="icon icon-arrow"></i>
        </span>
        <span class="elementor-button-text">Say Hello</span>
    </span>
</a>

span elementor-button-icon 包含我的图标。

这是 CSS:

a span.elementor-button-content-wrapper { position: relative;}

a span.elementor-button-content-wrapper:before {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -5px;
  left: 0;
  background-color: #0D4BDE;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

a:hover span.elementor-button-content-wrapper:before {
  visibility: visible;
  width: 100%;
}
a span.elementor-button-icon {visibility:hidden;opacity:0;transition:all .2s ease}
a span.elementor-button-text {transition:all .2s ease;}

a:hover span.elementor-button-text {transform:translateX(15px);}
a:hover span.elementor-button-icon {opacity:1;visibility:visible;}

但这根本不是正确的结果。我在网上到处搜索，但我没有找到任何东西。

我们中间有天才？

Answer 1

我不知道 Elementor，但在 css 中，您可以按照下面的示例进行操作，它应该可以帮助您开始实现目标。

a {
  text-decoration: none;
  font-family: sans-serif;
  position: relative;
  padding: .5rem 0;
  color: blue;
}

a::before {
  content: '';
  width: 0;
  height: 1px;
  background: blue;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: width .2s ease;
}

.elementor-button-icon {
  position: absolute;
  transform: translateX(-14px);
  opacity: 0;
  transition: all .2s ease;
}

.elementor-button-text {
  display: inline-block;
  transition: padding-left .2s ease;
}

a:hover .elementor-button-text {
  padding-left: 24px;
}

a:hover::before {
  width: 100%;
}

a:hover .elementor-button-icon {
  transform: translateX(0);
  opacity: 1;
}

<a href="#" class="elementor-button-link elementor-button elementor-size-sm">
    <span class="elementor-button-content-wrapper">
        <span class="elementor-button-icon elementor-align-icon-left">
            &#8594;
        </span>
        <span class="elementor-button-text">Say Hello</span>
    </span>
</a>

Answer 2

您可以调整以下内容。箭头 (overflow: hidden) 和下划线分别从 0 宽度扩展到 24px 和父宽度的 100%：

a {
  position: relative;
  text-decoration: none;
}

a::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: #0D4BDE;
  transition: width 1s ease-in-out;
}

.elementor-button-icon {
  display: inline-block;
  width: 0;
  overflow: hidden;
  transition: width 1s;
}

.elementor-button-text {
  transition: border 1s;
}

a:hover::after {
  width: 100%;
}

a:hover .elementor-button-icon {
  width: 24px;
}

<a href="#" class="elementor-button-link elementor-button elementor-size-sm">
  <span class="elementor-button-icon elementor-align-icon-left">&#8594;</span>
  <span class="elementor-button-text">Say Hello</span>
</a>

Link 动画悬停上的下划线和箭头

Underline and Arrow on Link Animation Hover

html

css

animation

underline

hover