@artetch

Как убрать after у первой ссылки?

Всем привет друзья, есть такое меню, через after я вывел такие полоски.. они есть у каждой ссылки кроме последней, в меню. А как убрать эту черточку у первой ссылки в этом меню? Вот код

<header id="header">
		<div class="container">
			<div class="row">
				<div class="col-md-6 clearfix">
					<a href="#" class="raleway" title="Home Page">Rale<span>way</span></a>
				</div>
				<div class="col-md-6 clearfix">
					<nav id="home-nav">
						<ul>
							<li><a href="#" title="">Home</a></li>
							<li><a href="#" title="">About</a></li>
							<li><a href="#" title="">Features</a></li>
							<li><a href="#" title="">Blog</a></li>
							<li><a href="#" title="">Shop</a></li>
						</ul>
					</nav>
				</div>
			</div>
		</div>
	</header>


.raleway span,
#home-nav ul > li > a:hover {
	color: #f2d801;
}

.raleway:hover {
	opacity: 0.3;
}

#home-nav {
	float: right;
	padding-top: 11px;
}

#home-nav ul > li {
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline-block;
	float: left;
}

#home-nav ul > li:after {
    content: "";
    background: #878787;
    width: 1px;
    height: 14px;
    display: inline-block;
    float: left;
    position: relative;
    top: -18px;
    
    -webkit-transform: rotate(27deg);
       -moz-transform: rotate(27deg);
        -ms-transform: rotate(27deg);
         -o-transform: rotate(27deg);
    		transform: rotate(27deg);
}

#home-nav ul > li > a {
	display: block;
	margin: 0 23px 0 23px;
	color: #fff;
	font-weight: 500;
	font-size: 0.940em;

	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
}
  • Вопрос задан
  • 195 просмотров
Пригласить эксперта
Ответы на вопрос 1
Punkie
@Punkie
#home-nav ul > li:first-child:after {
   display: none;
}
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы