Как сделать такой эффект ховера?

Question

[Николай Маратов]

joxi.ru/MAj7KE9sql1zre как сделать такой эффект ховера? с текстом проблем то нету никаких, а вот с границами сижу, мучаюсь.

Comments

[A K]

бордер-топ и бордер-бот

Answer 1

[Therapyx]

Вот держи) Сори за цвета, тут уже не принципиально, цвета на твоей совести ))
https://jsfiddle.net/buh9uaj3/19/

ключевое:

li:hover
{
    background-color:#ff0000;
    border-top: 2px solid blue;
    border-bottom: 2px solid blue;
}

Answer 2

[Bohdan Stadnyk]

Используйте псевдо-элементы before и after.

Comments

[Underline]

Что за бред? Достаточно border с двух сторон.

Answer 3

[Kjuri]

задать внешнему блоку ul верхнюю и нижнюю границу (это светло-серая) и высоту, внутренним же элементам высота равная внешнему+4px, position:relative;margin-top:-2px. И еще box-sizing: border-box задать, чтобы не прыгало, при появлении границ