Сползает контент?

Question

[marckus]

Здравствуйте.Возникла такая проблема.У элементов меню при наведении должен появляться border-bottom:2px solid red;.Но из-за borrdera при наведении сползает весь контент на 2рх.Как можно от этого избавиться

Answer 1

[Виталий Киренков]

Вместо бордера используйте тень, тогда все будет норм. Типа такого:
.item:hover { box-shadow: 0 2px 0 0 red;}

Comments

[marckus]

Спасибо.

Answer 2

[Андрей Б.]

Либо тенью, как предложили выше. Либо изначально задать прозрачную рамку, а при наведении менять border-color

.elem {
    border-bottom: 2px solid transparent;
}
.elem:hover {
    border-color: red;
}

Answer 3

[Иван]

box-sizing: content-box;

Comments

[Андрей Б.]

box-sizing тут не поможет

Answer 4

[DenTivor]

Попробуй свойство outline.
outline: 1px solid red;

ЕМНИП, не должен он разметку ломать