A text underline overlay effect is one of the simplest yet effective ways to draw user attention to your website. It can be used both to decorate text and to indicate links or active elements on the page. In this article, we will look at how to create such an effect using CSS in Elementor.

Step 1: Creating a Text Element in Elementor

The first step is to create a text element in Elementor. To do this, open the page where you want to add this effect and go to the Elementor editing mode. Then, drag a text element from the elements panel onto the page. Customize the text as you wish, choose the font and color.

Step 2: Adding a Class to the Text

To create the underline effect on the text, we must add a class to the text element. To do this, right-click on the text element and select “Edit section”. Then, find the “CSS Classes” field in the “Advanced” section and enter a class name, for example, “underline-effect”.

Step 3: Writing the CSS Code

Now we can write the CSS code to create the underline effect on the text. Add the following code to the “Custom CSS” section in Elementor:

CSS

.underline-effect {
  position: relative;
}
.underline-effect::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}
.underline-effect:hover::before {
  visibility: visible;
  transform: scaleX(1);
}

This code creates a ::before pseudo-element that is invisible and located under the text. When the cursor hovers over the text, we change the values of the “visibility” and “transform” properties to show the underline.

Step 4: Applying the Effect to the Text

To apply the underline effect to the text, go back to editing the text element and select the previously added “underline-effect” class in the “Advanced” -> “CSS Classes” section.

Step 5: Viewing the Changes

Save the changes and refresh the page to view the results. Now, when you hover the cursor over the text, you will see the underline effect.

In conclusion, we have looked at how to create a simple but effective text underline effect using CSS in Elementor. This effect can be used to decorate text or to indicate links and active elements on the page. By following our steps, you can quickly and easily add this effect to your Elementor website without the need for additional plugins.