Jump to content

css underline with "serif" ?


Recommended Posts

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

Link to post
Share on other sites

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 by CodeName
Link to post
Share on other sites

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

Link to post
Share on other sites

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 by CodeName
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...