See now how to edit the style of the link and hyperlink text style on your webpage in an easy way using CSS to make your links looks awesome and more attractive. Learn how to change the link underlines on your website.
Web browsers default has certain CSS styles that apply to specific HTML elements. The defaults will apply if you do not overwrite these defaults with your site’s style sheets. For hyperlinks, the default display style is that any linked text will be blue and underlined. The browser does this so that a site’s visitors can easily see what text is linked. Many web designers do not care for these default styles, especially those underlines.
Thankfully, CSS makes it easy to change the look of those underlines or remove them completely.
Change Link Style
REMOVING THE UNDERLINE ON TEXT LINKS
Underlined text can be more challenging to read than non-underlined text. Additionally, many designers simply do not care for the look of underlined text links. In these instances, you will likely want to remove these underlines altogether.
You will use the CSS property text-decoration to remove the underlines from text links. Here is the CSS you would write to do this:
a { text-decoration: none; }
You would remove the underline from all text links with that one line of CSS. Even though this is a very general style (it uses an element selector), it still has more specificity than the default browsers’ styles. Because those default styles are what create the underlines, to begin with, that is what you need to overwrite.
A CAUTION ON REMOVING UNDERLINES
Visually, removing underlines may be precisely what you want to accomplish, but you should also be cautious when doing this.
Whether you like the look of underlined links, you cannot argue that they make it evident which text is linked and which is not. If you remove underlines or change that default blue link color, you should replace them with styles that still allow linked text to stand out.
This will make for a more intuitive experience for your site’s visitors.
DO NOT UNDERLINE NON-LINKS
Another caution on links and underlines is doing not to underline text that is not a link to emphasize it. People have come to expect underlined text to be a link, so if you emphasize content to add emphasis (instead of making it bold or italicizing it), you send the wrong message and confuse site users.
CHANGE THE UNDERLINE TO DOTS OR DASHES
If you want to keep your text link underlines but change the style of that underline from the default look, which is a “soldi” line, you can do this too. Instead of that solid line, you can use dots to underline your links. To do this, you will still remove the underline, but you will replace it with the border-bottom style property:
a { text-decoration: none; border-bottom:1px dotted; }Since you’ve removed the standard underline, the dotted one is the only one that appears.
You can do the same thing to get dashes. Just change the border-bottom style to dashed:
a { text-decoration: none; border-bottom:1px dashed; }CHANGE THE UNDERLINE COLOR
Another way to draw attention to your links is to change the color of the underline. Just make sure the color fits with your color scheme.
a { text-decoration: none; border-bottom:1px solid red; }DOUBLE UNDERLINES
The trick to using double underlines is that you have to change the width of the border. If you create a 1px wide border, you’ll end up with a double underline that looks like a single underline.
a { text-decoration: none; border-bottom:3px double; }You can also use the existing underline to make a double underline with other features, such as one of the lines being dotted:
a { border-bottom:1px double; }DON’T FORGET THE LINK STATES
You can add the border-bottom style to your links at different states such as :hover, :active, or :visited. This can create a pleasant “rollover” style experience for visitors using that “hover” pseudo-class. To make a second dotted underline appear when you hover over the link:
a { text-decoration: none; }
a:hover { border-bottom:1px dotted; }
