css underline with "serif" ?

[midnite]

Hi there, I would like to know if there is a nicer CSS approach for the following effect:

<style type="text/css">  a { color: #000000; text-decoration: none; }  a:hover, a:active { text-decoration: underline; }</style><a href="#"> w3schools </a>

Using & nbsp; in both sides is a way. But can I use padding, and include a "box" inside the <a> and let the <a> underline the whole "box" with padding? (i tried but this does not work.) The concept is:

<style type="text/css">  a { color: #000000; text-decoration: none; }  a:hover, a:active { text-decoration: underline; }  div { padding: 0px 2px; }</style><a href="#"><div>w3schools</div></a>

It underlines only the words, but skipping the paddings THANKS very much for any helps or input!midnite

[eTianbun]

Block elements (like <div>), should not be inside inline elements (like <a>).Just giv the <a> tag padding in both sides and then giv it border-bottom on hover/active! ie:

a{padding:0px 2px;}a:hover,a:active{border-bottom:1px solid red}

EDIT:Note that you are targeting all <a> tag, and any <a> tag that is in the document, will have those property!

Edited July 11, 2012 by CodeName

[midnite]

Thanks very much for your help! I tried using border-bottom to simulate the underline. But it does not really like an ordinary underline - it is a few pixels further away from the text. I would like to use padding-bottom to pull it back. But padding-bottom does not allow negative values. Please have a look.

<style type="text/css">  a.one { color: #000000; text-decoration: none; }  a.one:hover, a.one:active { text-decoration: underline; }   a.two { color: #000000; text-decoration: none; padding: 0px 4px; }  a.two:hover, a.two:active { border-bottom: 1px solid red; }</style><a class="one" href="#"> w3schools </a><a class="two" href="#">w3schools</a>

Thanks,midnite

[eTianbun]

Does it realy matter? The best way of doing this, is the use of & nbsp;. incase you still want to go ahead, and be able to choose the color of the underline, then try displaying the <a> as inline-block, then set the height. e.g:a.two{color:#000000; text-decoration:none; padding:0 4px; display:inline-block; height:10px; /*set the height, so that the bottom border moves down*/}NB:Not recommended!

Edited July 11, 2012 by CodeName