Ghilas BELHADJ Ghilas BELHADJ - 4 months ago 8
CSS Question

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

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

That's not possible, because the elements are relatively positioned and the space each one occupies changes when the border-width changes.

I would suggest that you use box-shadow instead like so:

.cercle {
    box-shadow: 0 0 0 4px #ff9c08;
}

.menu:hover i {
    box-shadow: 0 0 0 2px #ff9c08;
    transition: box-shadow .1s
}

Check out an updated version of your fiddle here.

Another solution would be setting the box-sizing: border-box; property for .cercle, but it's not compatible with early versions of Internet Explorer, Safari, Firefox and Opera.

You can find more about the compatibility of box-sizing here.