1

Подскажите пожалуйста, почему не виден псевдоэлемент .top-nav ul li + li::before?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  height: 538px;
  width: 100%;
  background: url(../img/header-bg.png) no-repeat center center;
  background-color: rgba(0, 0, 0, 0.8);
  background-size: cover;
  position: relative;
}

header .wrap {
  position: relative;
  z-index: 2;
}

header:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: black;
  opacity: 0.7;
  z-index: 1;
}

.header-top {
  padding-top: 50px;
}

.wrap {
  width: 1024px;
  margin: 0 auto;
}



.top-nav {
  float: left;
}

.top-nav ul {
  list-style-type: none;
}

.top-nav ul li {
  display: inline-block;
  float: left;
  color: #00af47;
  font-family: 'Open Sans', sans-serif;
  font-size: 24px;
  font-weight: 400;
  text-transform: uppercase;
  padding: 0 15px;
}

.top-nav ul li a {
  text-decoration: none;
  color: inherit;
}

.top-nav ul li a:hover {
  color: #54D287;
}

.top-nav ul li + li::before {
  content: '';
  height: 20px;
  width: 5px;
  color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
}
<body>
	<header>
		<div class="wrap">
			<div class="header-top">
				<div class="top-nav">
					<ul>
						<li><a href="#">О нас</a></li>
						<li><a href="#">Услуги</a></li>
						<li><a href="#">Отзывы</a></li>
						<li><a href="#">Контакты</a></li>
					</ul>
				</div>
			</div>
		</div>
	</header>
</body>

Немного некорректно здесь сработало, но суть с псевдоэлементами в навигационном Ul верна.

2
  • 2
    какой псевдоэлемент?
    – code211218
    Commented 3 мая 2017 в 15:27
  • .top-nav ul li + li::before
    – PolonskiyP
    Commented 3 мая 2017 в 15:49

2 ответа 2

1

Поменяй его позицию на relative .

Добавь

 border-left: 1px solid #146481;

А что твой псевдоэлемент должен делать?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  height: 538px;
  width: 100%;
  background: url(../img/header-bg.png) no-repeat center center;
  background-color: rgba(0, 0, 0, 0.8);
  background-size: cover;
  position: relative;
}

header .wrap {
  position: relative;
  z-index: 2;
}

header:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: black;
  opacity: 0.7;
  z-index: 1;
}

.header-top {
  padding-top: 50px;
}

.wrap {
  width: 1024px;
  margin: 0 auto;
}



.top-nav {
  float: left;
}

.top-nav ul {
  list-style-type: none;
}

.top-nav ul li {
  display: inline-block;
  float: left;
  color: #00af47;
  font-family: 'Open Sans', sans-serif;
  font-size: 24px;
  font-weight: 400;
  text-transform: uppercase;
  padding: 0 15px;
}

.top-nav ul li a {
  text-decoration: none;
  color: inherit;
}

.top-nav ul li a:hover {
  color: #54D287;
}

.top-nav ul li + li::before {
  border-left: 1px solid #146481;
  content: '';
  height: 20px;
  width: 5px;
  color: #fff;
  position: relative;
  left: 0;
  top: 0;
  z-index: 100;
}
<body>
	<header>
		<div class="wrap">
			<div class="header-top">
				<div class="top-nav">
					<ul>
						<li><a href="#">О нас</a></li>
						<li><a href="#">Услуги</a></li>
						<li><a href="#">Отзывы</a></li>
						<li><a href="#">Контакты</a></li>
					</ul>
				</div>
			</div>
		</div>
	</header>
</body>

3
  • Нет, он должен делать просто вертикальные палочки между элементами списка. Но position не влияет на их появление никак...
    – PolonskiyP
    Commented 3 мая 2017 в 16:29
  • так ( border-left: 1px solid #146481; )?..........Ответ обновлён
    – code211218
    Commented 3 мая 2017 в 16:45
  • кстати да... можно ведь было просто бордером)) Я в другом проекте делал внизу, и там надо было особенно позиционировать, намного ниже. Поэтому делал при помощи псеводоэлемента. Но все равно очень странно, что так не работает...
    – PolonskiyP
    Commented 3 мая 2017 в 16:48
0
    .top-nav ul li {
+     position: relative;

    .top-nav ul li + li::before {
-     color: #fff;
+     background: #fff;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  height: 538px;
  width: 100%;
  background: url(../img/header-bg.png) no-repeat center center;
  background-color: rgba(0, 0, 0, 0.8);
  background-size: cover;
  position: relative;
}

header .wrap {
  position: relative;
  z-index: 2;
}

header:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: black;
  opacity: 0.7;
  z-index: 1;
}

.header-top {
  padding-top: 50px;
}

.wrap {
  width: 1024px;
  margin: 0 auto;
}



.top-nav {
  float: left;
}

.top-nav ul {
  list-style-type: none;
}

.top-nav ul li {
  position: relative;
  display: inline-block;
  float: left;
  color: #00af47;
  font-family: 'Open Sans', sans-serif;
  font-size: 24px;
  font-weight: 400;
  text-transform: uppercase;
  padding: 0 15px;
}

.top-nav ul li a {
  text-decoration: none;
  color: inherit;
}

.top-nav ul li a:hover {
  color: #54D287;
}

.top-nav ul li + li::before {
  content: '';
  height: 20px;
  width: 5px;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
}
<body>
	<header>
		<div class="wrap">
			<div class="header-top">
				<div class="top-nav">
					<ul>
						<li><a href="#">О нас</a></li>
						<li><a href="#">Услуги</a></li>
						<li><a href="#">Отзывы</a></li>
						<li><a href="#">Контакты</a></li>
					</ul>
				</div>
			</div>
		</div>
	</header>
</body>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.