Ghilas BELHADJ Ghilas BELHADJ - 1 year ago 51
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.


<span class="menu"><i class="cercle"></i>Foo</span>
<span class="menu"><i class="cercle"></i>Bar</span>


margin-right: 10px;
cursor: pointer

border-radius: 16px;
margin-right: 5px;
vertical-align: middle;
width: 16px;
border: 5px solid #ff9c08

.menu:hover i{
border-width: 3px;
transition:border-width .1s

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download