Hover на блог а изменения для after?

Question

[Константин Теплоухов]

Доброе утро , почему не работают эти стили ?

header .navbar .nav li:after{
	content: "";
	background-color: red;
	display: block;
	height: 3px;
	width: 100%;
	margin-top: 5px;
}
header .navbar .nav li:hover + header .navbar .nav li:after{
	background-color: #000;
}

Comments

[hellcaster]

Можно разметку?

[Константин Теплоухов]

muryn.official,

<div class="navbar">
							<ul class="nav">
								<li><a class="nav-link" href="#">тест 1г</a></li>
								<li><a class="nav-link" href="#">тест 2</a></li>
							</ul>
						</div>

[Andrej Sharapov]

.nav li:after {
  content: "";
  background-color: red;
  display: block;
  height: 3px;
  width: 100%;
  margin-top: 5px;
}

.nav li:hover:after {
  background-color: #000;
}

это надо?

Answer 1

[Андрей Федоров]

потому что у вас за первым тегом li идет второй тег li, а не header как вы пишете в css.

header .navbar .nav li:hover + li:after{
  background-color: #000;
}