Border not change size of text

Question

Alrighty, so I'm using this to make myself a header when a user hovers over the tab it'll show a line. I'm trying to do this without it changing the size when a user hovers over it. I want a line to appear but nothing else should happen.

Here is a fiddle, Fiddle

HTML:

<div class="header">
  <div class="header-tab">
    <div class="center-vertical">
      Main
    </div>
  </div>
</div>

CSS

.header-tab{
  height:100%;
    display:inline-block;
  padding:0 1vw 0 1vw;
  text-transform:uppercase;
  font-weight:450;
  color:white;
}

.header-tab:hover{
  color:#ff704d;
  background:gray;
  box-sizing: border-box;
  border-bottom:3px solid #ff704d;
}

.center-vertical{
  position: relative;
  top: 50%; 
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.header{
  height:5vw;
  background:black;
}

body{
  margin:0;
}

I think that it's because of the vertical center, but I'm quite unsure. Thanks!

Edit: I don't want it to like, jump up.

This question has been asked many times. Basically, add a transparent border in the non-hover state and change the color in the `:hover` state. — Heretic Monkey, Apr 18 '17 at 20:59
[1](http://stackoverflow.com/questions/8625812/css-hover-border-makes-inline-elements-adjust-slightly), [2](http://stackoverflow.com/questions/27648342/preventing-a-height-change-when-adding-a-border-with-box-sizing), [3](http://stackoverflow.com/questions/9612758/add-a-css-border-on-hover-without-moving-the-element), [4](http://stackoverflow.com/questions/3254587/when-1-px-border-is-added-to-div-div-size-increases-dont-want-to-do-that)... [Search](http://stackoverflow.com/search) and [research](http://stackoverflow.com/help/how-to-ask). — tao, Apr 18 '17 at 21:04
@AndreiGheorghiu didn't really know what to search to achieve this result. — Martijn Ebbens, Apr 18 '17 at 21:12

score 4 · Accepted Answer · answered Apr 18 '17 at 21:08

4

You can use box-shadow CSS property instead of border-bottom. Honestly, I think it makes quite a nice result for what you want to achieve.

.header-tab:hover{
  color:#ff704d;
  background:gray;
  box-sizing: border-box;
  box-shadow: inset 0 -3px 0 #ff704d;
}

Hint: I see that you're using height to define the menu's overall height. I recommend you to use the .header-tab padding to adjust the height. This way, you won't even need to vertical align anything.

I've edited your JSFiddle so you can see it.

answered Apr 18 '17 at 21:08

mluke

99
4

the point is, I'm using vw/percentages to define my footer and header and main, my page is unscrollable so I am nearly forced to work with a static height. – Martijn Ebbens Apr 18 '17 at 21:09
anyways, seems to be working just fine, thank you, I really didn't know how I'd search for this question. – Martijn Ebbens Apr 18 '17 at 21:11
I think both approaches could work well, but mine would demand a little more math. Still, I'm glad that it works. As a reference, I suggest you find some real website menus to take as an example, and inspect them with your browser's devtools. Might really come in handy! – mluke Apr 18 '17 at 21:26
This is a good solution. You and I were typing at the same time. Very elegant use of existing styles. – TMKAB121 Apr 18 '17 at 21:32

score 1 · Answer 2 · answered Apr 18 '17 at 21:27

First I need to say, all of these answers are true. However, I think the easiest solution is to use a background gradient instead of a background color. Sub this in for your hover state. It's also responsive and will adjust with your vw.

.header-tab:hover{
  color:#ff704d;
  background: #b7b7b7;
  background: -moz-linear-gradient(top, gray 0%, gray 93%, #ff704d 99%);
  background: -webkit-linear-gradient(top, gray 0%, gray 93%, #ff704d 99%);
  background: linear-gradient(to bottom, gray 0%, gray 93%, #ff704d 99%);
}

score 0 · Answer 3 · answered Apr 18 '17 at 21:09

Please take a look on there. now it is not jumping up.

https://jsfiddle.net/bizedkhan/pbxy32kq

.header-tab{
height:100%;
display:inline-block;
padding:0 1vw 0 1vw;
text-transform:uppercase;
font-weight:450;
color:white;
border-bottom: 3px solid transparent;
box-sizing: border-box;
transition: all .5s
}
.header-tab:hover{
color:#ff704d;
background:gray;
box-sizing: border-box;
border-bottom:3px solid #ff704d;
}
.center-vertical{
position: relative;
top: 50%; 
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.header{
height:5vw;
background:black;
}
body{
 margin:0;
}

Border not change size of text

3 Answers3