Underlines

Link
:link, :visited { text-decoration: underline overline; }
:link:focus, :visited:focus { color: green; }
:link { color: red; }
:visited { color: yellow; }
:link:hover, :visited:hover { color: blue; }
:link:active, :visited:active { color: fuchsia; }

How much can we define?

background: transparent; 
color: darkgreen; 
text-decoration: underline; 
font-family: monospace;
font-weight: bold;
font-style: italic;
font-size: 24px;

Padding around the content - a length (2 em) or percentage, 
	may not be negative, try 'padding-bottom' as 0
Border comes next - 
	'border-bottom-width' is thin, medium or thick, 
        'border-bottom-style' is none, solid, double, etc
        'border-bottom-color' as named, or transparent, 
which may be combined 
	{ border-bottom: thick solid red }
Outside is the Margin - a length (2 em) or percentage, 
		may be negative, try 0

A:link    { background: transparent; color: darkgreen;
            text-decoration: underline; }
A:hover   { background: transparent; color: olive;
            text-decoration: underline; }
A.blue:link    { background: yellow; color: navy;
    text-decoration: none; }
A.blue:hover   { background: pink; color: blue; 
    text-decoration: none; border-bottom: thick double red}

Now try line-height 10% and float : left
all appear to have no effect on the closeness of the under-line. Odd though, a margin value of -6 moves the link up. So back to margin: 0;

A.green:hover  { background: pink; color: blue; text-decoration: none;
            border-bottom: thick solid green ; margin-bottom: 0;
	    padding-bottom: 0; line-height 90%; float : left}

Conclusion -
now we can change the colour of the underline, but not get it closer to the word involved.

What about overline?

A.special:link    { background: pink; color: maroon;
            text-decoration: overline; }
A.special:hover { text-decoration: underline;} 

Now we try to declare both rules in the same line

 .xspecial       { text-decoration: underline overline ; 
		   color:maroon; background: palegreen;} 
A.xspecial:link  { text-decoration: underline overline ; 
		   color:maroon; background: palegreen;} 
A.xspecial:hover { color:blue; background: yellow;} 

XtraSpecial Over/Underline Link. Text-decoration cascades!

Putting two values together is allowed for text-decoration but varies as most properties only accept 1 value at a time.