Почему не меняется стиль другого элемента при hover?

Question

[Qairat]

Всем привет!
код

Comments

[Ankhena]

span там вообще зачем? В том примере, который показали он совсем лишний.

[Qairat]

Ankhena W, ну это для того чтобы снизу линия рисовалось по длинам слов.

[Ankhena]

Qairat Batyrbayev, ссылка и так инлайновая и у нее у самой бордер будет именно так рисоваться.
https://jsfiddle.net/uh9455x8/

[Qairat]

Ankhena W, смотрите при display:flex все ссылки длинные стали. Как быть в этом случай? код

[Qairat]

Ankhena W, я мог бы просто text-decoration: underline; поставить. Делаю border-bottom потому что хочу чтобы линия не было слишком близко к слову.

[Ankhena]

Qairat Batyrbayev, в этом случае, да, нужна дополнительная обертка.

Answer 1

[alvvi]

Селектор ~ выбирает всех следующих сиблингов соответствующих условию
Селектор + выбирает только сиблинга идущего сразу после элемента
НО только сиблингов, на уровень выше по CSSOM-у селекторы ходить не умеют, таковы правила.
У вас .item родитель a.

Comments

[alvvi]

Ankhena W, упс, my bad, поправил :)

Answer 2

[Марти Макфлай]

А можете описать что сделать то нужно в конечном счёте?

Comments

[Qairat]

поменять цвет border-bottom в красный при hover на элемент .

[alvvi]

Qairat Batyrbayev, https://jsfiddle.net/nom3r1dg/2/

Answer 3

[Кирюшка Цисарь]

в таком случае лучше уж не по a:hover ,а по родителю hover давать и изменять и его и дочерний элемент

Comments

[Qairat]

https://jsfiddle.net/nom3r1dg/2/ так и сделали. Спасибо!