How to remove underline from links

Community resources Webflow Tips
1

By default links are underlined. The way to remove underlines from your links is to

  • Select your link (or if you have text inside a Button Block, select it)
  • Give it a class
  • By default it is set to underline:

  • Unselect the underline style and we add text-decoration:none to your class:

  • BLAM! Now anything with that same class has no underlines.

NOTE: Text inside of a Link Block will get an underline that you will not be able to remove unless you select that Link Block and remove the underline from it. Press the up arrow on your keyboard or use your navigator to find the Link Block that your text is inside of.

10 Likes
3

Hi,

I’m trying to do this with a link block but I can’t make it work.

This is a screenshot in which you can see my webflow workspace

Am I doing anything wrong?

Thanks a lot!

4

@Cesc_Vilanova you are selecting the Text Span, not the link (which applies the underline). Press the up arrow on the keyboard to go up to the parent element, which is probably the Link Block, then you can remove the underline.

Let me know if that works.

8 Likes
5

Problem solved. Thank you very much!

1 Like
6

Can’t we just set this in the body? Or have a way to inject it into normalise.css. I mean there is a section in normalise.css for typography and one should I have thought webflow could have set the default their to like this:

/* ==========================================================================
Links
========================================================================== /
/*

  • Remove the gray background color from active links in IE 10.
    /
    a {
    background: transparent;
    }
    /    *
  • Address outline inconsistency between Chrome and other browsers.
    /
    a:focus {
    outline: thin dotted;
    text-decoration: none;
    }
    /    *
  • Improve readability when focused and also mouse hovered in all browsers.
    */
    a:active,
    a:hover {
    outline: 0;
    text-decoration: none;
    }
    a:link {
    text-decoration: none;

}
a:visited {
text-decoration: none;

}

A global css approach to this would also be appropriate. Not a fan of inserting codes often and often where I have to export my code and hook to web applications.

7

Thanks for the suggestion @topelovely. So you want all links by default to not have an underline? We’ve gone with the browser default, but we can change it in normalize. Not sure if everyone would want the links not underlined, but I can see that for most links/buttons will be styled to remove the underline.

1 Like
8

It’s pretty standard to style links differently for each site, and to allow for different styling in footer vs main content. It seems kind of odd to not allow one to globally style all links just like all H1s, etc. right in the Dashboard, without having to add a class. It’s not the best practice in writing css, it seems to me.

9

I agree @ChrisR! Indeed that is a more efficient way of designing a website. We do have plans to allow the user to either select all link (a tag) or just add a class down the road, but just haven’t been able to work on it because it’s a big feature to allow this type of functionality. I also can’t wait for it :slight_smile:

1 Like
10

Great to hear! I just want to say you folks are incredibly responsive to input from customers. I suspect that I may not be the core user for you, since I typically work in code (Textmate, Foundation) but I’ve been giving this tool for a whirl because it does make creating interactions and effects a lot easier than building manually.

1 Like