Градиент в одну полосу?

Question

[Nick Krogan]

Здрасте. как правильно сделать горизонтальный градиент? он работает по классу, который будет присваиваться потом элементам с помощью js. суть проблемы: цветной отрезок не хочет становиться в исходную точку с основной полосой.
вот код:

<div class="head_slider">
 <ul>
   	<li class="slider_active"><span>01&nbsp;</span>Intro</li>
   	<li><span>02&nbsp;</span>Work</li>
   	<li><span>03&nbsp;</span>About</li>
   	<li><span>04&nbsp;</span>Contacts</li>
</ul>
</div>

CSS

.head_slider li {
	position: relative;
	width: perc(280);
	padding-top: perc(22);
	font-size: 18px;
	font-weight: 400;
	color: #ffffff;
	font-family: Montserrat;
	text-transform: uppercase;
	border-top: 3px solid #ffffff;
}

.slider_active:before {
	content:"";
	display: block;
	position: absolute;
	width: 30%;
	top:0;
	border-top: 3px solid red;
}

разница получается в 1px. подскажите, как правильно это реализовать

Answer 1

[Иван Сергеев]

проблема в том, что основная полоса задана свойством border, используйте background для придания белого цвета для основной полосы, чтобы псевдоэлемент был сверху или сделайте так:

.slider_active:before{
   top: -3px
}

Comments

[Nick Krogan]

отриц топ не работает. за bg благодарю, буду позже пробовать

[Иван Сергеев]

Nick Krogan: попробуйте margin-top: -3px;
вообще странно, по идее top должен срабатывать..