Streaming live at 10am (PST)

Changing the color of the underline in a text link


#1

Hi. Does anyone know if its possible to change the underline link in text link. So I don’t want to change the color of the text just the underline.
For example like this site.
https://www.jcrew.com/ca/

In the “We can’t keep these in Stock section” The text is black and the underline is grey.

Thank you in advance.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hi @blam,

If you are talking about the text decoration underline it is possible with some custom code but it is not an option in Webflow.

Anyhow most of the time this type of effect is not accomplished with text decoration.

You could instead go with the border bottom property. You will be able to set the colour of it separately from the text colour.

22

Just a side note as borders are changing the flow of the document try to avoid setting a different border size on hover otherwise you might end up with some shifting of surrounding elements.

But instead set the colour to transparent on normal state and your desired colour on hover.

Hope it make sens.

Max


#3

Thank you, this helps. Also extra thanks for the added info on avoiding different border sizes; I will keep this in mind.


#4

Hi, sorry I don/t think I executed it properly. The underline is under the link.

(http://https://preview.webflow.com/preview/fashion-store-cd4cb0?preview=9ac880b28955706acc3fcb536bc5206f


#5

Hey @blam,

I forgot to mention, you need to change the default style of links first. Select the all link tag selector and apply the style of text decoration : none.

This way you will get rid of the underline on all links.


#6

That was it. :slight_smile: On to the next challenge; getting the border to be the width of the text and not the whole width of the column. I am thinking its a put a div within in a div situation.