Как скрыть бордер предыдущего элемента?

Question

[IIIu6ko]

У каждого пункта меню есть :after, который выполняет роль бордера с правой стороны.
При ховере цвет фона пункта изменяется на аналогичный бордеру. Бордер элемента на который навели скрывается, а вот предыдущего элемента остаётся выпирать, это видно если навести на второй или третий пункт меню.
https://jsfiddle.net/s7z50fjc/

Как скрыть after предыдущего пункта меню? Либо как можно реализовать иначе подобный дизайн? Я временно решил проблему смещением элемента влево на ширину after, но это смотрится не очень.

Answer 1

[Иван Татауш]

как вариант можно так попробовать
https://jsfiddle.net/s7z50fjc/2/

Comments

[IIIu6ko]

Как это работает? Первый раз такой способ вижу просто :)
Надо запомнить. Спасибо большое, то что нужно!

[Иван Татауш]

если уберешь transition: all 0.4s; и добавишь transition только для background и color не будет лагов.

[Иван Татауш]

Александр Шибков: при наведении делаешь сдвиг влево чтобы твоя ссылка наезжала на линию, в твоем случае это margin-left: -2px; и чтобы не было заметно при наведении добавляешь с левой стороны padding на 2 больше чем с правой, тогда текст не будет прыгать.

margin-left:-2px;
padding-left: 32px; // было 30

[IIIu6ko]

Да, я уже так сделал.

[Иван Татауш]

Александр Шибков: =)

Answer 2

[Миша]

Можно скрывать ::before у следующего пункта меню с помощью соседнего селектора +.

Comments

[IIIu6ko]

Это вроде работает только для элемента, который после текущего идет. Он не может обратиться к предыдущему.

[Миша]

Александр Шибков: да, но можно добавлять псевдоэлемент не к правому краю первого элемента, а к левому краю второго.

Answer 3

[Flur]

Ну как вариант при ховере можете добавить правый бордер item - у зеленого цвета, который будет перекрывать этот символ (разделитель)

Comments

[IIIu6ko]

Можешь на jsfiddle показать? Либо это не работает, либо я не понял)

Answer 4

[romy4]

а почему нельзя это сделать без :after?

Comments

[IIIu6ko]

Будет разница?)
+ мне нужно чтобы бэкграунд во всю высоту цвет менял, а бордер был в ~высоту букв.
Оборачивать каждый пункт в span/div не вариант.