How to Change the Underline Color of the Link within a Text

Questions
1

In my text I have a link. I can use the Rich Text Editor to set a color that is different from my Text element color for the link only.

I want to see how the BBCode handles a [url=https://www.google.com][color=#ff0000]LINK[/color][/url]

However, when the user hovers over the link, there is an underline that appears which is the same color as the Text element and not the link color.

Any idea how I can set the color of the underline to be the same as the link?

2

Try this:

<style>

#text-element-ID a:hover {
 text-decoration: underline #FF0000 !important;
}

</style>
3

Thanks for that. I was hoping there might have been a way to do via BB code to more precisely target the link component of the text element.

I will give the suggestion a shot…I suppose the a:hover is referencing an a href html tag, which in my text the link is in bb code brackets, but I’ll see if this can work or not for my use case. Thanks for the suggestion.

4

Yes, #text-element-ID references the text element and a:hover references the links < a > (in this case in BB code), inside the indicated text element.

1 Like
5

This works beautifully. Thanks for the help on this.

1 Like
6

Hi. Is there a way of amending the code to make a underline appear all of the time and not just while hovering?
With standard BBcode text using the text element it doesn’t show an underline on links.

7

BBcode for underline is [u] so just put that into the text before the link and after the link put the closing bracket [/u]

8

Thanks. I also managed to find that the below CSS worked:

<style>
#elementID a:link {
  text-decoration: underline !important;
}
</style>
1 Like
9

Hello @boston85719, I may be late but I just found a way simpler solution to this, so you and others know :

[url=https://www.google.com][color=#ff0000]This text will not underline in the color[/color][/url]

[color=#ff0000][url=https://www.google.com]But this text will[/url][/color]

To do it easily, put the color, THEN the link :wink:
Enjoy !

1 Like