When I make border in hover, another element slightly moved, how to make it stayed in their position?

Question

I'm trying to make nav bar with flexbox, and when I add hover with border effect, the other element "moved". That's because the border only appear when hovered. How to make another elements stay in their position? in this case the categories, and the hr lines moved

Here's the full code

.navbar{
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
margin-left: 5px;
}
.navbar-menu{
display: flex;
flex-flow: row wrap;
}
.navbar-menu a{
color: inherit;
text-decoration: none;
padding: 8px;
}
.navbar-menu a:hover{
border: 2px solid #e84393;
color: white;
border-radius: 6px;
}

score 4 · Accepted Answer · answered Feb 07 '19 at 12:01

4

you can use this trick

.navbar-menu a{
    color: inherit;
    text-decoration: none;
    padding: 8px;
    border: 2px solid transparent; /* add this line */
}

so basically initially border is transparent and on hover it only gets color visible and hence no mess up in position

answered Feb 07 '19 at 12:01

ashish singh

6,526
2
15
35

thanks, it worked :) – Ananda Vj Feb 07 '19 at 12:02
great trick! thanks! – kofhearts Sep 05 '20 at 02:30

score 2 · Answer 2 · answered Feb 07 '19 at 12:01

2

Apply a transparent border in the normal state already;

Or use outline instead of border to begin with. (outline does not influence an elements size.)

answered Feb 07 '19 at 12:01

04FS

5,660
2
10
21

thanks, it worked ^^ – Ananda Vj Feb 07 '19 at 12:02

When I make border in hover, another element slightly moved, how to make it stayed in their position?

2 Answers2