sanManjiro
@sanManjiro

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

<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", то увеличивается и текст, и сама полоса слева.
  • Вопрос задан
  • 70 просмотров
Решения вопроса 1
@tihomirovPro
Frontend developer
Оберни текст например в span сделай ему display: block и при ховере на li увеличивай span c помощью transform: scale(1.1)

Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы