Elementor: How to change the styling of link underlines (With CSS)

There are several ways you can style you underlines with the Elementor plugin. However, you’ll have to know a bit of CSS – or copy what I write here.

Style a specific paragrafs underline

If you style your link underline site-wide, you’ll also style the navigation menu and possibly more links you don’t want to underline. To style specific paragraphs, you should open an Elementor page, post, or template.

For this purpose, I’ll edit a template. From the WordPress admin panel I simply navigate to the theme builder, and choose the template I’m editing.

1. Select the section of text you want to style.
2. Head to advanced
3. Type in a class name. You’ll use that selector to style your link underlines.
4. Scroll down and open ‘Custom CSS.’ The CSS code goes here.
5. Enter your CSS code, and you’re done!
   • Scroll down to the next heading to find CSS codes.

The CSS code for underlines

First, you’ll have to select the links of your paragraph. To select the class name you just wrote, write a period (.) character, followed by the name of the class. Use this code to

.class-name-here a:link {
     CODE HERE WILL STYLE LINK
}


.class-name-here a:link {
     CODE HERE WILL STYLE LINK WHEN HOVERED BY MOUSE
}

There are several ways you can style the underline. If you don’t know CSS, you can use others’ code to style your underline. Google is your friend here!

Here is the code and an example of styling. I changed the color to red and changed the thickness.

.class-name-here a:link {
    text-decoration: underline;
    text-decoration-color: red;
    text-decoration-thickness: 0.065em;
}

Style underlines site-wide

1. Head to the WordPress admin panel > Elementor
2. Choose Custom Code > Add new
3. Here, you can add your CSS code, as we did above. Make sure to put the code between the <style> stag, use the correct selector and class name.