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

Question

[Максим]

Есть меню. У каждого пункта есть полосочка справа, сделанная через after (да, я видел похожий вопрос тут, но не понял решения).
Как можно при наведении на 2 пункт скрывать after первого, наводить на 3 - скрывать after второго и т.д.?
Все ссылки блочные, со своей шириной заданной.

Answer 1

[Exploding]

Не надо ничего скрывать, просто при :hover показывать его и готово!

.class:after{
   display:none;
   ...
}
.class:hover:after{
   display:block;
   ...
}

Answer 2

[Stalker_RED]

Не нужно делать никаких специальных штук для того, чтобы скрыть что-то у предыдущего элемента. Просто показывайте полоску только в том случае, если на элемент наведена мышь.

li:hover::after {
   /* здесь стили полосочки */
}

https://jsfiddle.net/h9fwL2j2/

Comments

[Максим]

При наведении как раз и не должно их быть.

[Stalker_RED]

Максим Васянович, элементарно, Ватсон!
https://jsfiddle.net/h9fwL2j2/1/