Archived topic
Change Underline Colours
10 replies · Started by Sebastián on April 9, 2018
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
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.
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
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;
}
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!
You could try this:
.elementor a {
text-decoration: none;
border-bottom: 1px dotted red;
}
I'm not seeing any underlined links on that page?
Try now!
I would like to remove them for the blog page and the others.
Only dotted underline on blog posts.
Try this:
.elementor.single a {
text-decoration: none;
border-bottom: 1px dotted red;
}
Not working for me :/
I need to put everything on additional css or I could use simple css?
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!
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.