Geek Answers Handbook

Line below hover links

How to add a short line below the link? The line should be visible only on hover. I tried using border-bottom, but in this case the line will be 100% of the width of the link, and I want the line to be shorter than the link.

Here is an example image of the effect I'm trying to do.

enter image description here

+7
html css html5 css3
source share
7 answers

You can try using the alias ::after :

 a { position: relative; text-decoration: none; } a:hover::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 0; border: 1px solid black; } 
 <a href='#'>Demo Link</a>
+8
source share

This is what I just thought, look what you think. Therefore, we use :after and create a line below the text. This only works if the parent has a width (for centering).

HTML:

 <div>Test</div>

CSS

 div { width: 30px; } div:hover:after { content: ""; display: block; width: 5px; border-bottom: 1px solid; margin: 0 auto; }

Demo

Updated CSS:

 div { display: inline-block; }

Not sure why I didn't think about it, but you can just use inline-block to get it to the center without a parent having a width.

DEMO HERE

Here is a link using the same method, just make you confused.

DEMO HERE

So, now they told me that I should even point out the most obvious thing, so here is an update for people who don’t know that width can be percentage.

 width: 70%;

Changed the width from 5px to 70% , so it will expand with the width of the text.

DEMO HERE

+8
source share

Edit: Ruddy's solution has the same result and is more elegant, so based on this, I used it recently with the addition of a transition, which made it a little more attractive, and I thought it would be useful to share here:

  a { display: inline-block; text-decoration:none } a:after { content: ""; display: block; width: 0; border-bottom: 1px solid; margin: 0 auto; transition:all 0.3s linear 0s; } a:hover:after { width: 90%; }

jsfiddle link

(original answer below)

Check this out , I just came up with playing the violin:

  <a class="bordered" href="#">I am a link, hover to see</a> a.bordered { text-decoration:none; position: relative; z-index : 1; display:inline-block; } a.bordered:hover:before { content : ""; position: absolute; left : 50%; bottom : 0; height : 1px; width : 80%; border-bottom:1px solid grey; margin-left:-40%; }

Depending on the percentage, you can play with a.bordered: hover: in front of the field and left position.

+4
source share

Just use this class:

 .link:hover { background-image:url("YOUR-SMALL-LINE-BOTTOM.png") }

like this, a line will appear when you hover over an item. And you can indicate in the image how small or large the line should be.

+3
source share

Try creating another div for the border. And adjust the width of this div according to your choice. Hope this helps.

+2
source share

how about this?

 a {text-decoration:none;position:relative;} a:hover:before {content:"_";position:absolute;bottom:-5px;left:50%;width:10px;margin:0 0 0 -5px;}

check this script more: http://jsfiddle.net/h7Xb5/

+2
source share
 use underline or if u want the line to be much shorter try scalar vector graphics(svg) with this you can have custom lines. <svg id="line "height="40" width="40"> <line x1="0" y1="0" x2="700" y2="20" style="stroke:rgb(125,0,0);stroke-width:2" />
+1
source share

More articles:


All Articles