Как выровнять 1 элемент по правому краю и плавно вернуть в центр?

Question

[Капитан Какао]

Товарищи знатоки, возникла, казалось бы, простейшая задача, но как её решить не приложу ума.
И так, есть кнопка в которой по центру текст а справа иконка - исходник

Слева и права от текста одинаковое расстояние 102px, если масштабировать ширину экрана, ширина кнопки будет изменяться, но отступы слева и справа всегда будут идентичны.

При наведении, иконка смещается в центр. И теперь отступы по бокам снова одинаковые

Казалось бы всё отлично, но эффект перемещения иконки нельзя сделать плавным, из за того, что по умолчанию
margin-left: auto;
а при наведении
margin-left: 5px;
Переход между словом "auto" и числовым значением сделать плавным через transition нельзя.

Как быть что делать?
Если придумать как выровнять иконку по правому краю иначе, можно решить проблему.
Но все варианты которые я пробовал, упираться в туже проблему, при наведении анимация не работает из за перехода текстового значения в числовое.

Answer 1

[YavaDev]

Comments

[Капитан Какао]

Запутанное решение, но по факту результат получаться то что нужно, спасибо

Answer 2

[ettaluni]

.btn {
position: relative;
}
.ico {
position:absolute;
margin-left: 100%;
}
.btn:hover .txt {
margin-left: 0;
transition: all 5.5s ease-out;
}
Дальше сам

Comments

[Капитан Какао]

и как же я высчитаю размер текста для правильного позиционирования иконки при наведении?
Ладно бы если ширина кнопки была фиксированной. Но она резиновая.