Проблема вёрстки hover

Question

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

ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
}


a {
  text-decoration: none;
  font-size: 1.1em;
  padding-right: 45px;
  color: #000;
  letter-spacing: 0.7px;
}

a:hover {
  border-left: 2px solid #000;
  padding-left: 10px;
}

<ul>
  <li><a href="#">Главная </a></li>
  <li><a href="#">Портфолио</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">Калькулятор</a></li>
  <li><a href="#">О нас</a></li>
</ul>

Answer 1

Нужно "зарезервировать" место под линию, сделав линию прозрачной:

a {
  ...
  border-left: 2px solid transparent;
}

a:hover {
  ...
  border-left-color: #000;
}

Answer 2

ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
}


a {
  text-decoration: none;
  font-size: 1.1em;
  padding-right: 45px;
  color: #000;
  letter-spacing: 0.7px;
  display: inline-block;
  padding-left: 10px;
  border-left: 2px solid transparent;
  transition: border-left 2s;
}

a:hover {
  border-left: 2px solid #000;
}

<ul>
  <li><a href="#">Главная </a></li>
  <li><a href="#">Портфолио</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">Калькулятор</a></li>
  <li><a href="#">О нас</a></li>
</ul>

БЛОГ НА HUSL

Проблема вёрстки hover

Ответы (2 шт):