Border-Top & Text issue - html

Question

I have a simple navigation bar with an hover element.
.navip {
float: left;
text-decoration: none;
font-weight: lighter;
}
.navip > a {
display: block;
color: black;
text-decoration: none;
font-size: 20px;
font-weight: lighter;
line-height: 40px;
}
.navip > a:hover {
border-top: 3px solid blue;
}
When i hover on a, the border displays. But its taking down the text a little bit.
How i can fix this?
JsFiddle: http://jsfiddle.net/w0btkceg/
Edit: Solved it! I had to increase the height to 45 and add "border-top: 3px solid transparent" to the "navip a" class.

Answer 1

try to use
.navip > a:hover {
border-top: 3px solid blue;
margin-top: -3px;
}

Answer 2

I use this for menu:
.menu-item {
margin: 5px;
font-size: 1em;
font-weight: bold;
float: left;
border-top-style: solid;
border-top-width: 4px;
border-top-color: transparent;
}
.menu-item a {
padding: 5px 0;
text-decoration: none;
}
.menu-item-selected {
border-top-color: green;
}
.menu-item:hover {
border-top-color: green;
}
<div class="menu-item">
Test 1
</div>
<div class="menu-item menu-item-selected">
Test 2
</div>
<div class="menu-item">
Test 3
</div>
<div class="menu-item">
Test 4
</div>

Answer 3

Just do something like:
.navip > a {
display: block;
color: black;
text-decoration: none;
font-size: 20px;
font-weight: lighter;
line-height: 40px;
border-top: 3px solid transparent;} /* add a transparent border to the a */
.navip > a:hover {
border-top: 3px solid blue; /* Now just change the color value of the border from transparent to a color on over */
}
See working example here
Solution: Add a transparent border to the a , then add a color to it on hover. That way, the text won't move because the border existed before hover.

Answer 4

You could try box-sizing:border-box; this will include the border in the size of the box and is probably the most elegant solution.
Or my previous fix for this was just to have 10 padding for the normal link then padding:8px; for the hover version which had a border. Which would counter the border size.

Answer 5

Ok, you can declare a border-top property for the .navip > a{}, with 0 opacity on it, and then on hover, use your border color, like this one(check here)
.navip > a {
display: block;
color: black;
text-decoration: none;
font-size: 20px;
font-weight: lighter;
line-height: 37px; /*readjust for the border stuff*/
border-top: 3px solid rgba(255,255,255,.0);/*or transparent*/
}
.navip > a:hover {
border-top: 3px solid blue;
}
OR you can use a negative margin-top property on hover, or top property if you can make the .navip > a to position relative, check it here:
.navip > a {
position: relative;
display: block;
color: black;
text-decoration: none;
font-size: 20px;
font-weight: lighter;
line-height: 40px;
}
.navip > a:hover {
margin-top: -3px;/*or top: -3px*/
border-top: 3px solid blue;
}

Answer 6

You could use a box-shadow instead of a border-top, like this:
.navip > a:hover {
box-shadow: inset 0 3px 0 0 blue;
}
More info here: MDN Box Shadow