Don't affect positioning of other elements on border-width changes - css

Question

I'd like to change border-width of a circle on hover without affecting the positioning of other elements.
It will be more clear with this jsFiddle.
HTML
<span class="menu"><i class="cercle"></i>Foo</span>
<span class="menu"><i class="cercle"></i>Bar</span>
CSS
.menu{
margin-right: 10px;
cursor: pointer
}
.cercle{
border-radius: 16px;
margin-right: 5px;
vertical-align: middle;
width: 16px;
height:16px;
display:inline-block;
border: 5px solid #ff9c08
}
.menu:hover i{
border-width: 3px;
transition:border-width .1s
}

Answer 1

There are a couple of different ways you can go about achieving the effect you desire.
1. Using box-sizing: border-box:
Normally, neighbouring elements are affected by the changing an element's border-width property, because the elements are relatively positioned and the space each one occupies changes when the border-width changes. Using box-sizing: border-box ensures the width of the border is included in the dimensions of the element.
.cercle {
box-sizing: border-box;
}
2. Using box-shadow:
An alternative would be to use box-shadow property, instead, to imitate the visual appearance of a border but without its particular behaviour. The shadow of an element doesn't affect neighbouring elements when modified, so it's another good option to consider when trying to achieve the effect you desire.
.cercle {
box-shadow: inset 0 0 0 4px #ff9c08;
}
.menu:hover > .cercle {
box-shadow: inset 0 0 0 2px #ff9c08;
}
Check out more about the browser compatibility of box-sizing and box-shadow to see which suits you better. An updated version of your jsfiddle can be found here and a snippet just below.
Snippet:
.menu {
margin-right: 10px;
cursor: pointer;
}
.cercle {
width: 16px;
height: 16px;
display: inline-block;
margin-right: 5px;
vertical-align: middle;
border-radius: 16px;
}
#ex1 .cercle {
border: 4px solid #ff9c08;
box-sizing: border-box;
}
#ex1 .menu:hover i {
border-width: 2px;
transition: border-width .1s;
}
#ex2 .cercle {
box-shadow: inset 0 0 0 4px #ff9c08;
}
#ex2 .menu:hover .cercle {
box-shadow: inset 0 0 0 2px #ff9c08;
transition: box-shadow .1s;
}
<div id = "ex1">
<span class="menu"><i class="cercle"></i>Foo</span>
<span class="menu"><i class="cercle"></i>Bar</span>
</div>
<br>
<div id = "ex2">
<span class="menu"><i class="cercle"></i>Foo</span>
<span class="menu"><i class="cercle"></i>Bar</span>
</div>

Answer 2

This is not possible without having a border already on the element as adding a border would increase the width and height of the element. The technique I prefer is to have a transparent border on non-hover state to begin with and change the colour on hover.
.menu {
border: 3px solid rgba(0,0,0,0);
}
.menu:hover {
border-color: black;
}

Answer 3

This actually is possible, with box-sizing.
Setting .cercle { box-sizing: border-box; } means that the width and height of the .cercle elements includes the size of the border.
As such, the size of the .cercles will shrink with box-sizing: border-box, but that's an easy fix: just up the height and width from 16px to 21px (a change of 5px, since 5px was the size of the border).
Hopefully I explained how this works okay!
See this jsfiddle for functioning code:
https://jsfiddle.net/xhanrkzy/3/

Answer 4

I would assume you wanted to scale it down.
I used the transform property to do this:
.menu:hover i {
/* border-width: 3px; */
transform: scale(0.95);
transition: border-width .1s
}

Answer 5

In general "box-sizing: border-box" is a great simple solution. Note you can set it to apply to every element by default in your style-sheet. Here's a nice article about it: https://css-tricks.com/box-sizing/ .
Be aware that using border-box and changing the border-width means there is less space inside the circle etc. That is because the border "grows inwards" when using border-box. Therefore changing the border-width can affect the position of elements INSIDE the DOM-element whose border-width you are changing. Whether you consider those to be "other elements" (as per your question) is a matter of semantics.