The gradient in one lane?

Hello. how to make a horizontal gradient? he's working class, which will then be assigned to the elements using js. the problem: color the cut doesn't want to get to the starting point with the main strip. 1a020198735049b79bf1ff19db5ef1ac.png
here is the code:
<div class="head_slider">
the <ul>
 <li class="slider_active"><span>01 </span>Intro</li>
 the <li><span>02 </span>Work</li>
 the <li><span>03 </span>About</li>
 the <li><span>04 </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;
}

the difference is 1px. prompt how correctly to implement it
July 2nd 19 at 16:55
1 answer
July 2nd 19 at 16:57
the problem is that the band specified by the border property, use background to give a white color for main strip to the pseudo-element on top or do this:

.slider_active:before{
 top: -3px
}
neg top not working. for bg's thank you, will try later - Nyasia48 commented on July 2nd 19 at 17:00
: try margin-top: -3px;
generally it is strange, in theory the top should work.. - abigail_Lesch commented on July 2nd 19 at 17:03

Find more questions by tags CSSHTML