Best way to change link underline colour?

HTML & CSS
1

This is something I haven’t done for a few years and I’m wondering whether there are now some elegant methods to change link underline colour in modern browsers. I’m interested in having a plain simple underline but in a different colour than the text. So far I know of the following methods but each of them has some drawbacks:

  1. Wrap links in a span and set a different colour to the span. But I don’t want any additional markup…

  2. Use border-bottom. But this creates a line that is 1px lower than standard underline. When the lines of text are not widely spaced this can look odd.

  3. Use a background image on links with the line I want. This looks like the most elegant method but is a bit more work because in order to control the colour I have to use an external program to create the image.

Is there currently a better method of doing this in CSS? This needs to work in all major browsers and IE 8 and up - but with some graceful degradation I wouldn’t mind if it worked in IE 9 and up.

2

Here are a couple of ways to achieve that effect Tho I am not sure how wise UX/UI speaking this is.users recognize a link because the text AND underline are the same color; you are threading dangerously. Grumpy cat says ‘no.’

<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
			.un a, un {
				position: relative;
				text-decoration: none;  

 			}
			.un a:after {
				content:'';
				border-bottom:1px solid red;
				position: absolute;
				bottom:2px;
				left:0;
				right:0; 
 			}
 			
 			.un2 a{
 				text-decoration: none;  
			background:  -webkit-linear-gradient(bottom, red, red 1px,  transparent 1px) 0 0 ; /* you can use the bg position part of the shortcut to do fine px adjustment of the position of the undeline*/
			background:  -moz-linear-gradient(bottom, red, red 1px,  transparent 1px)  0 0 ;
			background:  linear-gradient(bottom, red, red 1px,  transparent 1px)  0 0;
  			background-size: 100% 1em;
 			-moz-background-size: 100% 1em;
			line-height: 1em; /* lineheight should match  bg vertical size*/
			-moz-background-origin: content;/* for firefox 3.6*/
			background-origin: content-box;
 			}

		</style>
	</head>
	<body>
<div class="un"><a href="#"> This link is underlined in a dif color </a></div>
<div class="un2"><a href="#"> This link is underlined in a dif color Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</a></div>
	</body>
</html>

.un uses a pseudo element, which means this method has broader support, but wont handle wrap around lines, or multiple lines of content. :confused:

.un2 handles wrap arounds and multiple lines fine, but since uses generated gradients, so browser support is more limited and of course you gotta do all sorts of vendor prefixes ( I included the spec, webkit, and moz in this example)

As this is applied to links and links are a pivotal part of a users web experience, it’s important to note that .un makes for an easier fall back strategy. that is, the pseudo element is above the link, so you can use it to cover up the original text-decoration; when the pseudo element is not generated then you still have the underlined link.

in .un2 you may need to rely on hacks or conditional comments to set the text decoration back to underline for browsers that don’t support gradients

hope that helps

3

Thanks, interesting tips. I think .un is not nice in that it will not work for wrapped lines so could use it only in specific scenarios, not as a general styling for text.

.un2 is interesting, I haven’t thought of using gradients for that. I’m wondering why you are using background-size as this seems to resize the gradient and it looks a little blurry. And from my testing I found I could strip some of the declarations and use a simplified version of your .un2:


<html>
<head>
	<title></title>
	<style type="text/css">
	.un2 a{
		text-decoration: none;  
		background:  -webkit-linear-gradient(bottom, red, red 1px, transparent 1px) 0 -1px ;
		background:  -moz-linear-gradient(bottom, red, red 1px, transparent 1px) 0 -1px ;
		background:  linear-gradient(bottom, red, red 1px, transparent 1px) 0 -1px;

	}
	</style>
</head>
<body>
	<div class="un2">This is not link. <a href="#">This link is underlined in a dif color Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</a> This is not link.</div>
</body>
</html>

This works well, however I’ll have to decide if I’ll use this or a background image, which has the advantage of needing no hacks or fallbacks for older IE’s.

My intention is not such a drastic change of colour as in your example, actually I want to apply some opacity to the underline so that it looks a bit more subtle. I will have some links in a table with one-line rows and because the table borders are also lines there seem to be too many lines for a visitor’s eyes. I could have asked about underline-opacity but I think this would be too much wishful thinking :slight_smile: