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

Posted 2023-03-06

【中文标题】链接动画悬停上的下划线和箭头

【英文标题】：Underline and Arrow on Link Animation Hover

【发布时间】：2021-07-23 03:46:54

【问题描述】：

我正在拼命地在我的链接上创建一个类似于此 gif 的动画。

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

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

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

我们当中的天才？

【参考方案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>

【参考方案2】：

您可以调整以下内容。箭头 (overflow: hidden) 和下划线分别从 0 宽度扩展到 24 像素和父宽度的 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>