[Support request] Change Underline Colours

[Sebastián]

Hi!

I want to change the underline colour from the hyperlinks. Also I would like to change the style of the underline hyperlink to dotted.

What CSS should I use?

Thanks

[Leo]

Hi there,

Can you guide me to a hyperlink you are referring to?

Just want to check if it’s getting style from GP or Elementor.

Let me know.

[Sebastián]

Is not only one hyperlink I want everyone of the hyperlinks with a different style.

I use elementor blog posts but it’s not gonna be a problem right?
https://sebastiancardozo.com/como-ser-mas-productivo-blogger/

There you have different hyperlinks through the text.

Thanks

[Tom]

You’re using the <u> element to underline the text, which makes it so we can’t style it: https://www.screencast.com/t/yMIdhDCgLdC

Instead, do something like this (once those elements are removed):

.elementor a {
    text-decoration: underline;
    text-decoration-color: red;
}

[Sebastián]

It works but i also want a dotted underline.

And another important thing, if i dont want hyperlinks underlined for example the ones on https://sebastiancardozo.com/blog/ can I take them off?

Thanks!

[Tom]

You could try this:

.elementor a {
    text-decoration: none;
    border-bottom: 1px dotted red;
}

I’m not seeing any underlined links on that page?

[Sebastián]

Try now!

I would like to remove them for the blog page and the others.

Only dotted underline on blog posts.

[Tom]

Try this:

.elementor.single a {
    text-decoration: none;
    border-bottom: 1px dotted red;
}

[Sebastián]

Not working for me :/

I need to put everything on additional css or I could use simple css?

[Sebastián]

And another thing I only want the links on the article itself underlined. Not the header and footer.

I don’t know if what im asking is possible though

Thanks!

[Leo]

You are using Elementor Canvas which strips all of GP’s elements and style so I wonder if they would have a better method for this instead of us giving you CSS solution to modify it.
I think it’s worth checking with their support.

Otherwise give this a shot:

.post-template-elementor_canvas.single elementor-container a {
    text-decoration: none;
    border-bottom: 1px dotted red;
}

But again I would recommend checking with their support as you can see the CSS is targeting their content.

[Author]

Posts