Ненужное движение псевдоэлемента в ссылке при наведении?

Question

[AlohaAlohaAloha]

Господа,

Суть проблемы такова.
Есть линк(а) содержащий другой тег - (i). В теге (i) посредством псевдо-элемента подключена иконка .svg. Иконка должна центрироваться посреди линка.
При наведении на линк, его границы переходят из 1px в 8px - но тут возникает проблема. Иконка тоже двигается, что само собой не требуется, так как она должна быть статична и центрироваться посредством абсолютного позиционирования.

Код представлен ниже. К сожалению без иконки. Но надеюсь, суть понятна. Подскажите пожалуйста, в чем может быть проблема.
codepen.io/anon/pen/YwJrjB

Заранее благодарен,
Сергей

Comments

[Aksigera]

Вы рано отметили мой ответ решением, добавил туда реальное решение проблемы)

[AlohaAlohaAloha]

Aksigera Ого. Я только что заметил. Просто, после Вашего ответа я решил добавить отрицательный margin - и все сработало без дополнительных divs. :))) Но все равно спасибо за второе решение. ;)

Answer 1

[Aksigera]

У вас все в порядке с кодом, просто изображение не масштабируется относительно малого круга. Посмотрите здесь codepen.io/anon/pen/adRLXK

codepen.io/anon/pen/vLVePw - решение. Используется блок .helper, аналогичный по размерам и позиционированию с .service__link. У ссылки мы забираем position: relative и передаем .helper-у. Таким образом, внутренний абсолютно позиционированный элемент рассчитывает свое положение не от изменяющихся границ ссылки, а от постоянных границ внешнего блока-хелпера

Comments

[AlohaAlohaAloha]

Большое спасибо! Очень благодарен.