Как реализовать рамки и их ховер в css?

Question

[KhalBay]

Есть список элементов, у каждого есть рамка. Необходимо:
1. Чтобы рамки везде были по 2px (включая первый и последний элемент) - с этим я разобрался
2. При ховере рамки элемента, сверху и снизу, меняли цвет - вот здесь главная проблема, потому что у меня рамки сделаны по логике(рамка верхнего элемента 1px + нижнего 1px = нужная ширина 2px ) . Ну собственно, если даже поставить 2px элементы начнут "скакать" и будет рамка от соседнего элемента в 1px. Думал сделать ещё на четные и нечетные элементы, но тоже понимаю что там будет криво и по PixelPerfect не пройдет, больше идей нету, как это грамотно реализовать.

Для наглядности как сделано сейчас:

Comments

[Сергей Сергей]

.a__item:first-child:hover {
  border-top: 2px solid black;
}

[KhalBay]

Сергей Сергей, Да, забыл дописать это в код, но это не та проблема которую я не могу решить

[KhalBay]

Смысл в рамках у средних элементов, при наведении, остается рамка сверху и снизу от других элементов, а нужно чтобы ховер был, на 2px т.е. в примере получается что и на рамку соседнего верх. и ниж. элементов

[Сергей Сергей]

ага.
делать только верхнюю границу, кроме последнего. при ховере красить границу следующего
.a__item:hover + .a__item{}

[KhalBay]

Сергей Сергей, ОГОНЬ! спасибо большое, так получается, что на все мои вопросы, всегда отвечаешь ты))

[Сергей Сергей]

это просто совпадение.

Answer 1

[EugeneNail]

Вместо работы с непосредственно границами рекомендую смотреть в сторону псевдо-элементов.
1) Наложите каждый из элементов списка друг на друга через margin-top: -2px;
2) Пропишите только боковые границы, а в качестве верхней и нижней используйте псевдоэлементы ::before и ::after.
3) При наведении на основной элемент перемещайте эти псевдоэлементы вверх по z-index и меняйте им цвет.

Comments

[KhalBay]

Отличное решение, хорошо придумал, но уже сделал через покраску только верхней рамки.
Спасибо, отмечу как решение

Answer 2

[Rst0]

Comments

[KhalBay]

хм.. интересный вариант, про наложение и тени совсем не подумал, круто, спасибо!