Ghilas BELHADJ Ghilas BELHADJ - 5 months ago 7
CSS Question

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

I'd like to change border-width of a cercle on hover without affecting the positionning 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.

Comments