我刚开始使用 Elementor for WordPress，我想知道如何为标题创建淡出 in/fade 淡出下划线效果

Question

这里有一个网站有我要找的效果：https://wehaulmo.com/

每个部分中的“今天伸出援手”link 是我在这里特别提到的。

我不确定这是否是使用的自定义 css，或者是否确实有一个小部件可以帮助在 Elementor 中创建此效果。我可以仅使用 index.html 和 style.css 来创建这种效果，没有任何问题，但同样，我试图了解如何在 Elementor for WordPress 网站中完成此操作。

我一定在这里遗漏了一些东西，因为这种效果非常标准，我无法在 Elementor 中找到可以创建这种下划线效果的 widget/element。

如果有人是 Elementor 大师，我们将不胜感激。

谢谢。

Answer 1

任何时候你需要在 Elementor 页面中做一些 front-ended 无法使用小部件完成的事情，你可以使用一些方法来实际抛出一些 css （甚至 JS）那里。

1 - HTML WIDGET（没有 Elementor Pro 也能工作）

在您需要元素的位置插入 HTML 小部件。 HTML 小部件在 'content' 选项卡中提供了一个文本区域。在此文本区域中，您可以编写 HTML 代码，但您也可以使用 <style></style> 标记添加 CSS。例如：

<p class="demo">Hello!</p>

<style>
.demo{
    color: blue;
}
</style>

如果您需要 Javascript，您甚至可以添加 <script></script> 标签。

此外，每个 Elementor 前端小部件都有一个 'advanced' 选项卡，您可以在其中找到 'advanced' 部分（'advanced' 的第一部分标签）。在该部分中，有两个标记为 'CSS ID' 和 'CSS Class' 的字段，它们允许您向该元素添加 ID and/or 和 class。然后，您可以使用 DOM.

在 CSS 和 Javascript 中引用该 class 或 ID

2 - 自定义 CSS（仅限专业版）

Elementor 中的每个（几乎每个）小部件在其 'advanced' 选项卡下都有一个 'custom CSS' 部分。请记住，您需要 Elementor Pro 才能访问此部分。您可以在该部分写下您需要的所有 CSS。

此外，在该文本区域中，您可以引用正在编辑的元素而无需其 class 名称或 ID，只需使用 'selector' 即可：

selector{
    margin: 0 auto;
}

Use "selector" to target wrapper element

3 - 插件

有多种插件专门用于使用短代码或其他方法向 Elementor 和其他编辑器添加代码。

你的情况

在你的情况下，使用我描述的第一种方式 (HTML WIDGET)，你需要在你的 HTML Widget 的文本区域中写一些类似的东西：

<a href="#" class="demo">REACH OUT TODAY</a>
<style>
.demo {
  color: #f89c27;
  font-size: 24px;
  letter-spacing: 0.20em;
  position: relative;
  display: inline-block;
}

.demo:hover{
    color: #f89c27;
}

.demo:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
position: absolute;
  display: block;
  height: 2px;
  left: 50%;
  background: #f89c27;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}

.demo:hover:after {
  left: 0;
  width: 100%; 

}
</style>

Answer 2

感谢 Shiverz 在这里为我指明了正确的方向，这对我帮助很大。再次感谢大佬

这是对我有用的 HTML 和 CSS 代码：

/*** Styling Underline Hyperlink ***/

/* Creating Underline */
.underline.elementor-widget-heading .elementor-heading-title>a {
    position: relative;
}

.underline.elementor-widget-heading .elementor-heading-title>a:after {
    content: '';
    width: 0%;
    height: 2px;
    background-color: #FAC074;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translatex(-50%);
    -webkit-transition: width .4s;
    transition: width .4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

.underline.elementor-widget-heading .elementor-heading-title>a:hover:after {
    width: 90%;
    -webkit-transition: width .4s;
    transition: width .4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

/** Creating Arrow **/
.underline.elementor-widget-heading .elementor-heading-title>a:before {
    content: url(http://ronratzlaff.wpengine.com/wp-content/uploads/2020/09/icon-arrow-right.svg);
    width: 1px;
    height: 1px;
    position: absolute;
    bottom: 15px;
    right: -12px;
}

<div class="elementor-element elementor-element-c3ae88a underline elementor-widget elementor-widget-heading" data-id="c3ae88a" data-element_type="widget" data-widget_type="heading.default">
    <div class="elementor-widget-container">
        <div class="elementor-heading-title elementor-size-default"><a href="#request">Reach Out Today</a></div>
    </div>
</div>

我刚开始使用 Elementor for WordPress，我想知道如何为标题创建淡出 in/fade 淡出下划线效果

I just started using Elementor for WordPress and I want to know how I can create a fade in/fade out underline effect for a heading

css

wordpress

elementor