Elementor Custom CSS Code: How To Underline Links & Change Elementor Link Color

Are you wondering how to underline links with CSS for Elementor?

Well, the good news is that I recently had the same issue and have provided the code below that I used.

Let’s dive in!

Elementor Custom CSS Code To Underline Links For Elementor Text Widget

The first thing that you’ll need to understand is that Elementor has different classes for their widgets.

Consequently, if you try to use the normal CSS code to highlight links but use the class for WordPress posts, then you won’t see any change.

For Elementor, if you’re trying to change the links inside of a text editor widget then you want to use the following class: .elementor-text-editor

Additionally, you can add some hover effects using the following class: .elementor-text-editor a:hover

After that, you can add in some familiar CSS code to get the job done.

Here’s a quick overview of the CSS commands to underline links:

  • text-decoration: underline [this command creates the underline]
  • text-decoration-style: solid [this command creates a solid underline, but you can also make it dashed, wavy, etc.]
  • text-decoration-color: #CC3366 [this command specifies the color of the underline using a color code, but you can also simply type out a common color as well]

Note that you need to ensure that each line has a semicolon at the end or the code won’t work.

Now it’s time for the good news!

I went ahead and have provided my exact code that I use below.

Copy & Paste CSS Code For Elementor Text Widget 

/* Link Underline In Elementor Text Editor */
.elementor-text-editor a {
text-decoration: underline;
text-decoration-style: solid;
text-decoration-color: #CC3366;
}
.elementor-text-editor a:hover {
text-decoration: underline;
text-decoration-style: solid;
text-decoration-color: gray;
}

Elementor Custom CSS Code To Underline Links For Elementor Toggle Widget

Another thing I noticed after adding in CSS code to underline links for the Elementor text widget was that it wasn’t showing up for my FAQs.

Take a look at the image below from my ActiveCampaign review which shows the toggle widget that I’m referring to.

CSS Code To Underline Text In Elementor

In order to get the link underlined in the image above, I had to add in some additional code for that specific widget.

See below the code to copy and paste.

Copy & Paste CSS Code For Elementor Toggle Widget

/* Link Underline In Elementor Toggle Widget */
.elementor-tab-content a {
text-decoration: underline;
text-decoration-style: solid;
text-decoration-color: #CC3366;
}

.elementor-tab-content a:hover {
text-decoration: underline;
text-decoration-style: solid;
text-decoration-color: gray;
}

You’ll notice from the image above that it was simply a matter of determining what class the widget was that I wanted to target.

If you have a different widget you want, then you can right click on the specific widget on your website and choose “inspect”.

CSS Classes for Elementor

From there, you can take the class and replace it in your CSS code appropriately.

Where Do You Paste The CSS Code In Elementor?

Here’s an overview of how to paste the CSS code in Elementor if you’re not familiar.

Step 1: How To Paste CSS Code In Elementor

Next, you need to select Additional CSS to apply the CSS code globally across your site.  The theme I’m using is Astra for reference.

Step 2: Additional CSS Code In Elementor

Finally, you can simply paste in your CSS code and hit publish!

Frequently Asked Questions

In Elementor, you can either add custom CSS globally across your site or for individual columns and widgets.  

  1. Click on the widget you want to edit.
  2. Navigate to advanced settings
  3. Scroll down to custom CSS and paste in your code.

In order to delete an Elementor column, simply right click on the column symbol and select delete.

In order to delete an Elementor widget, simply right click on the edit widget symbol and select delete.

Conclusion

Congratulations!  If you followed the steps outlined, then you should have your custom CSS code in Elementor and have your links underlined.

Play around with different underline styles and colors to see what you can create.

This just scratches the surface of what you can do with CSS code for your website.

If you want to learn more about blogging and other topics, then check out the list of posts below to dive into next. 🙂 

Posts You May Also Enjoy…

Affiliate Disclaimer

I hope you enjoyed this post. This post may contain affiliate links, meaning I get a commission if you decide to purchase through my links at no additional cost to you.

David Sandy Ebook Trilogy Books

Get All 3 Of My Ebooks... For Free!

>
3 Shares
Share
Tweet
Pin3