Как правильно примнить :not(:first-child) li:before?

Всем привет! не могу разобраться с псевдоелементами, прошу вашей помощи. итак:

ест секция:

<section id="project">
		<div class="resize clear">
			<h2>Реализованные ПРОЕКТЫ</h2>
			<menu>
				<li><a href="#">Кухни</a></li>
				<li><a href="#">Раздвижные двери</a></li>
				<li><a href="#">Шкафы-купе</a></li>
				<li><a href="#">Офисная мебель</a></li>
				<li><a href="#">Стеновые панели</a></li>
			</menu>
			<div class="kitchen clear">
				<ul>
					<li><a href="#"><img src="images/kitchen1.jpg" alt="kitchen1"></a></li>
					<li><a href="#"><img src="images/kitchen2.jpg" alt="kitchen2"></a></li>
					<li><a href="#"><img src="images/kitchen3.jpg" alt="kitchen3"></a></li>
					<li><a href="#"><img src="images/kitchen4.jpg" alt="kitchen4"></a></li>
					<li><a href="#"><img src="images/kitchen5.jpg" alt="kitchen5"></a></li>
					<li><a href="#"><img src="images/kitchen6.jpg" alt="kitchen6"></a></li>
					<li><a href="#"><img src="images/kitchen7.jpg" alt="kitchen7"></a></li>
					<li><a href="#"><img src="images/kitchen8.jpg" alt="kitchen8"></a></li>
					<li><a href="#"><img src="images/kitchen9.jpg" alt="kitchen9"></a></li>
					<li><a href="#"><img src="images/kitchen10.jpg" alt="kitchen10"></a></li>
					<li><a href="#"><img src="images/kitchen11.jpg" alt="kitchen11"></a></li>
					<li><a href="#"><img src="images/kitchen12.jpg" alt="kitchen12"></a></li>
				</ul>
			</div>
		</div>
	</section>


и есть стили:
#project {
	width: 100%;
	background: top center url(../images/back_ground3.jpg) no-repeat;
	background-size: cover;
	height: auto;
	h2 {
		font-size: 45px;
		font-weight: normal;
		line-height: 1.3em;
		color: black;
		text-align: center;
		padding-top: 120px;
		text-transform: uppercase;
	}
	.kitchen {
		border-bottom: 2px solid #888888;
		padding-bottom: 100px;
		ul {
			text-align: justify;
			line-height: 0;
			padding: 0;
			&:after {
				width: 100%;
				height: 0;
				visibility: hidden;
				overflow: hidden;
				content: "";
				display: inline-block;
			}
			li {
				display: inline-block;
				text-align: left;
				padding: 5px 0;
				img {
					width: 100%;
				}
			}
		}
	}
	menu {
		text-align: justify;
		line-height: 0;
		padding: 0;
		margin-left: 30px;
		margin-right: 30px;
		&:after {
			width: 100%;
			height: 0;
			visibility: hidden;
			overflow: hidden;
			content: "";
			display: inline-block;
		}

		li {
			display: inline-block;
			text-align: left;
			padding: 5px 0;
			position: relative;
			a {
				display: block;
				font-size: 20px;
				line-height: 1.3em;
				color: #0d0d0d;
				text-transform: uppercase;
				&:hover {
					color: #c31e2f;
				}
			}
		}
		&:not(:first-child) li:before {
			top: 18px;
			left: -35px;
			content: "\\\\";
			position: absolute;
			font-size: 20px;
			width: 5px;
			height: 5px;
			color: #a6a6a6;
		}
	}
}


в итоге получается вот такого вида меню:

ab20a1b632154918b07c6fdedf7962c4.png

и теперь вопрос, как правильно применить &:not(:first-child) li:before что бы в меню перед пунктом "кухни" не было псевдоелемента //.

спасибо за внимание!

P.S. и вообще может есть какие то замечания именно по стилям?
  • Вопрос задан
  • 270 просмотров
Решения вопроса 1
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Sibdev Ульяновск
от 40 000 до 60 000 руб.
Sibdev Красноярск
от 40 000 до 60 000 руб.
23 сент. 2018, в 18:12
1000 руб./за проект
23 сент. 2018, в 16:20
20000 руб./за проект
23 сент. 2018, в 15:36
1000 руб./в час