Переместить базовый текст в <li>2 px вверх

Question

Я реализовал свое меню веб-страницы с помощью встроенных li -s из ul.li имеет цветную рамку и содержит a.Теперь onmousehover Мне нужно изменить цвет текста внутри a и переместить его 2px вверх, не сдвигая границу li.Как я могу это сделать?

Answer 1

Хитрость заключается в том, чтобы немного убрать верхний отступ и немного увеличить нижний, чтобы сохранить целостность разметки.

Я создал простой пример того, что вы хотите. Проверьте это на скрипке здесь

HTML:

<ul>
  <li><a href="#">Home</a></li>
</ul>

CSS:

ul { width: 200px; margin: 20px; }
li { border-top: 2px #000 solid; padding: 5px; }

li a { padding: 5px; display: inline-block; }
li:hover a { padding: 3px 5px 7px 5px ; }

Answer 2

Добавьте это к своему CSS:

a:hover.jump {
            color: [Insert whatever];
            position: relative;
            bottom: 2px;
}

А затем добавьте класс к вашей ссылке

<ul>
<li><a href="http://google.com" class="jump">My Link Text</a></li>
</ul>

Вы можете добавить цвета фона или что-то еще, что вам нужно в тексте при наведении. Клише названный, но довольно полезный сайт CSS Ninja имеет кучу примеров