Elementor Underline Text Effect Using CSS

Learn how to achieve Elementor underline text effect using nothing but just Custom CSS. And apply hover animation to the underlined part of the text.
This snippet requires the following Themes/Plugins/Services/Tools:

Copy the following HTML Snippet into Text Area of any Elementor widget such as icon box widget, text editor widget or any widget with text in it.

 <span class="da-coolstuff">Text</span>

NOTE: Only for the text editor widget above HTML snippet needs to be copied into the text tab of the widget.

Copy the snippet from below:

background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
background-repeat: no-repeat;
background-size: 100% 0.2em;
background-position: 0 88%;
transition: background-size 0.25s ease-in, color 0.25s ease-in;
.da-coolstuff:hover {
background-size: 100% 88%;
filter: grayscale(50%);
color: white;



Learn Elementor Custom CSS from the scratch. Up your Web Design game!