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

以下是一个具有我正在寻找的效果的网站：

每一节中的“今日接触”链接就是我在这里特别提到的内容

我不确定这是否是使用的自定义css，或者是否确实有一个小部件可以帮助Elementor创建这种效果。我可以使用index.html和style.css创建这种效果，没有问题，但我还是想了解如何在Elementor for WordPress网站中实现这一点

我必须在这里遗漏一些东西，因为这种效果是相当标准的，我一生都无法在Elementor中找到可以创建这种下划线效果的小部件/元素

如果有人是Elementor大师，我们将非常感谢您的帮助

---

谢谢。

每当你需要在Elementor页面前端做一些小部件无法完成的事情时，你都可以使用一些方法在其中添加一些css（甚至JS）

---

1-HTML小部件（在没有Elementor Pro的情况下工作）

将HTML小部件插入您需要的元素所在的位置。HTML小部件在“内容”选项卡中提供一个文本区域。在此文本区域中，您可以编写HTML代码，但也可以使用

标记添加CSS。例如：

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

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

使用“选择器”以包装器元素为目标

---

3-插件

有各种各样的插件是专门为Elementor和其他编辑器添加代码而设计的，可以使用短代码，也可以通过其他方法

---

---

在您的情况下

在您的情况下，使用我描述的第一种方式（HTML小部件），您需要在HTML小部件的文本区域中按照以下内容编写一些内容：

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

.演示{
颜色：#f89c27；
字体大小：24px；
字母间距：0.20em；
位置：相对位置；
显示：内联块；
}
.演示：悬停{
颜色：#f89c27；
}
.demo:在{
背景：无重复滚动0 0透明；
底部：0；
内容：“；
位置：绝对位置；
显示：块；
高度：2倍；
左：50%；
背景：#f89c27；
过渡：宽度0.3s，左0.3s；
宽度：0；
}
.演示：悬停：之后{
左：0；
宽度：100%；
}

感谢Shiverz为我指明了正确的方向，它帮了我大忙。再次感谢你，伙计

以下是适用于我的HTML和CSS代码：

/***样式下划线超链接***/
/*创建下划线*/
.underline.elementor-widget-heading.elementor标题标题>a{
位置：相对位置；
}
.underline.elementor-widget-heading.elementor标题标题>a:之后{
内容：''；
宽度：0%；
高度：2倍；
背景色：#FAC074；
位置：绝对位置；
底部：-10px；
左：50%；
转化：translatex（-50%）；
-webkit过渡：宽度.4s；
过渡：宽度4s；
-webkit转换计时功能：轻松输入输出；
过渡定时功能：易进易出；
}
.underline.elementor-widget-heading.elementor标题标题>a:悬停：之后{
宽度：90%；
-webkit过渡：宽度.4s；
过渡：宽度4s；
-webkit转换计时功能：轻松输入输出；
过渡定时功能：易进易出；
}
/**创建箭头**/
.underline.elementor-widget-heading.elementor标题标题>a:之前{
内容：网址(http://ronratzlaff.wpengine.com/wp-content/uploads/2020/09/icon-arrow-right.svg);
宽度：1px；
高度：1px；
位置：绝对位置；
底部：15px；
右：-12px；
}

我看到有一个html小部件，并正在考虑，但当我检查网站上的元素时，它显示链接使用的是Elementor标题。不管怎样，我会试试看。谢谢你的帮助。是的，我也检查过了。但是，正如我提到的，您可以在元素的advanced选项卡下为元素提供一个类或id。我猜就是这样做的，然后css是从自定义css（仅限Pro）部分添加的。如果没有pro，您可能会给一个类添加一个标题，然后让一个只包含CSS的html小部件产生相同的效果。我希望你能找到一个适合你的方法。我暂时有专业的。再次感谢你的帮助，太好了！我处理好了！再次感谢你，伙计。我只需要制作一个Elementor标题，给它一个CSS类ID“underline”，然后像你说的那样简单地将自定义CSS添加到Advanced选项卡中，这非常简单。很高兴我能帮助你！我发现自定义CSS选项卡非常有用，如果你有专业。可惜没有一个javascript等价物。无论如何，既然您提到您刚刚开始使用Elmentor，请不要犹豫发布任何其他与Elementor相关的问题，我几乎每天都会浏览Elementor标签。；-）

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