Как я могу сделать увеличение текста при наведении?

Question

[San Manjiro]

<div className='header-menu'>
  <ul className='header-menu__ul'>
    <li>О НАС</li>
    <li>ГЛАВНАЯ</li>
    <li>НОВОСТИ</li>
    <li>МАГАЗИН</li>
    <li>ЛИЧНЫЙ КАБИНЕТ</li>
  </ul>
</div>

.header-menu ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.header-menu li {
  float: left;
  display: inline;
  border-left: 1px solid #eee;
  padding: 0px 25px 0px 25px;
}
.header-menu li:first-child {
  border: none;
}

Проблема заключается в том, что "li" элементы у меня разделены белой чертой через "border-left" и когда я вешаю на них "hover", то увеличивается и текст, и сама полоса слева.

Comments

[Ankhena]

Хорошее такое меню без ссылок.

Принцип такой: делаете грид из каждого пункта. В data-атрибут пишете текст из пункта.
Делаете псевдоэлемент из data. Делаете его жирным или большим или как там нужно. Кладете нижним слоем в грид и скрываете opacity, visibility.
Потом с самим текстом делаете что хотите.

Делать песочницу лень, потому что это популярный тут вопрос, нужно будет погуглите прямо код. Раньше он был на абсолютах, теперь можно на гридах.

Answer 1

[Сергей Т]

Оберни текст например в span сделай ему display: block и при ховере на li увеличивай span c помощью transform: scale(1.1)