Padding between text and underline

HTML & CSS
1

Is there any way I can change the space between the text and underline on links? I’m not talking about line-height.

2

Have you tried line-height?

If that doesn’t work then I don’t think there would be any way of changing it like that.

You COULD however, try removing the underline from the link like so:

text-decoration: none

then use the border property like so:

border-bottom: 1px solid #000000; padding-bottom:2px;

For example, copy this code. You should see an underline that is 2 pixels below the text:


<html>
<head>
<title> New Document </title>
<style type="text/css">
<!--
/* link colors */
a:link { font-weight: bold; text-decoration: none; color: #2b4d8a; }
a:hover { font-weight: bold; text-decoration: none; color: #000000; }
a:visited { font-weight: bold; text-decoration: none; color: #2b4d8a; }
a:visited:hover { font-weight: bold; text-decoration: none; color: #000000; }
.underline {border-bottom: 1px solid #000000; padding-bottom:2px;}
-->
</style>
</head>
<body>
<a href="bitemte.html" class="underline">This is a test link</a>
</body>
</html>

Just play with putting the border code inside one of the HREF tags until you get the effect you’re looking for.

3

It doesn’t work with line-height, but what you suggested is a good idea. Thank you.