Почему не работает анимация и элементы блока(при наведении)становятся слишком огромными и переставляют друг друга?

Question

[BavarianBeer]

https://jsfiddle.net/z0nq4rj7/1/
Почему не работает анимация и элементы блока(при наведении)становятся слишком огромными и переставляют друг друга?

Как мне добиться того чтобы наведенная ссылка становилась больше и при этом не двигала другие ссылки? хелп.

Answer 1

[Imposter]

.menu-categories__link:before{
    content: attr(title);
    display: block;
    font-weight: bold;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

<li class="menu-categories__item"> 
     <a class="menu-categories__link" title="Квадроциклы" href="#">Квадроциклы</a>
</li>

С помощью before можно "зарезервировать" место для fw:bold. Для этого в content=''; в before нужно чтобы передавался title из разметки HTML. И соответственно для каждой ссылки нужно добавить атрибут title, а в нем будет просто название ссылки.

Answer 2

[Евгений Сальников]

<ul class="menu-categories">
    <li class="menu-categories__item">
        <a class="menu-categories__link" href="#">Квадроциклы</a>
    </li>
    <li class="menu-categories__item">
        <a class="menu-categories__link" href="#">Катера</a>
    </li>
    <li class="menu-categories__item">
        <a class="menu-categories__link" href="#">Гидроциклы</a>
    </li>
    <li class="menu-categories__item">
        <a class="menu-categories__link" href="#">Лодки</a>
    </li>
    <li class="menu-categories__item">
        <a class="menu-categories__link" href="#">Вездеходы</a>
    </li>
    <li class="menu-categories__item">
        <a class="menu-categories__link" href="#">Снегоходы</a>
    </li>
    <li class="menu-categories__item">
        <a class="menu-categories__link" href="#">Двигатели</a>
    </li>
    <li class="menu-categories__item">
        <a class="menu-categories__link" href="#">Запчасти</a>
    </li>
  </ul>

.menu-categories {
    width: 1600px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    background: #F0F0F4;
    height: 40px;
    align-items: center;
}
 
li {
    font-weight: 600;
    align-items: center;
}
 
li:last-child {
    border: none;
}
 
li a {
    font-size: 20px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    align-self: center;
    text-decoration: none;
    color: #2F3035;
    display: flex;
    width: 200px;
    transition: 0.2s;
}
 
li a:hover {
    font-size: 30px;  /* меняй вот это значение  */
    border-bottom: solid 4px #1C62CD;;
    transition: 0.1s;
}

UPD: Стили не все соблюдены, сорянчег) на скорую руку накидал. Проверь код и посмотри, чего ты лишнего туда набросал и что можно было изменить. И не торопись с работой по классам. Поработай для начала с тегами, если всё ок - назначай классы. С тегами проще. Названия классов могут быть громоздкими, как у тебя - от этого можно и запутаться. Начинай всегда с малого и успехов тебе ;-)