Как сделать линию при ховер эффекте над предыдущей линией?

Question

[Taras Vladychko]

Сори за качество картинки. Есть темная линия снизу блока. Но нужно чтоб при наведение появилась линия другого цвета под текстом. И линия при наведение должна перекрывать темную. В интернете не смог найти информацию. Спасибо за ответы.

Answer 1

[Ankhena]

Псевдоэлементом поверх границы родительского блока
По простому https://jsfiddle.net/y9o8eszh/
Варианты позиционирования могут быть разными.

Другой вариант https://jsfiddle.net/s201xbu8/

Comments

[Taras Vladychko]

А если я задам нижний паддинг для родителя чтоб линию опустить ниже то как мне вторую линию опустить на тот же уровень?

[Ankhena]

Taras Vladychko, либо позиционируйте псевдо абсолютом либо не задавайте родителю паддинг, задайте его (или margin) кому-нибудь другому.
Вариантов масса.

[Ankhena]

Taras Vladychko, Например, padding самой ссылке https://jsfiddle.net/s201xbu8/

[Taras Vladychko]

Спасибо, все получилось)

Answer 2

[Антон Неверов]

Делаете border-buttom от того элемента, на который наводите.
Полоса снизу под всеми элементами - это border-bottom родительского элемента на всю длину.

Comments

[Taras Vladychko]

Я так делал, но при наведении на слово нижняя граница смещает нижнюю границу родительского блока.

[Антон Неверов]

border-bottom сделайте цвета transparent в обычном состоянии. При ховере - цвет выставляете ваш.