CSS selectors stepper arrows - html

Question

I have a stepper with an arrow pointing to the right from stage 1 to stage 5.
I want to change the color of the previous and the next arrow for the current stage when I move my mouse over them.
The first problem is that I dont know how to get the arrows (pseudo elements) with css selectors and make them change color the same time with the span element.
The second problem it that the arrow of the current stage is red and the next arrow can not form a parallelogram.. It doesn't look nice
.steps {
padding-left: 0;
list-style: none;
font-size: 13px;
line-height: 1;
margin: 0px auto;
border-radius: 3px;
}
.steps strong {
font-size: 14px;
display: block;
line-height: 1.3;
}
.steps>li {
position: relative;
display: block;
/* border: 1px solid #ddd; */
padding: 12px 20px 8px 50px;
width: 20%;
height: 58px;
}
#media (min-width: 768px) {
.steps>li {
float: left;
}
.steps .past {
color: #777;
background: #f4f4f4;
}
.steps .present {
color: #fff;
background-color: #c32611;
}
.steps .future {
color: #777;
background: #f4f4f4;
}
.steps strong {}
.steps li>span:after,
.steps li>span:before {
content: "";
display: block;
width: 0px;
height: 0px;
position: absolute;
top: 0;
left: 0;
border: solid transparent;
border-left-color: #f0f0f0;
border-width: 29px 30px;
}
.steps li>span:after {
top: -5px;
z-index: 1;
border-left-color: white;
border-width: 34px;
}
.steps li>span:before {
z-index: 2;
}
.steps li.past+li>span:before {
border-left-color: #f4f4f4;
}
.steps li.present+li>span:before {
border-left-color: #c32611;
}
.steps li.future+li>span:before {
border-left-color: #f4f4f4;
}
.steps li:first-child>span:after,
.steps li:first-child>span:before {
display: none;
}
/* Arrows at start and end */
.steps li:first-child i,
.steps li:last-child i {
display: block;
position: absolute;
top: 0;
left: 0;
border: solid transparent;
border-left-color: white;
border-width: 30px;
}
.steps li:last-child i {
left: auto;
right: -30px;
border-left-color: transparent;
border-top-color: white;
border-bottom-color: white;
}
<ul class="steps">
<!--past present future-->
<li class="past" onMouseOver="this.style.background='#e3e3e3'" onMouseOut="this.style.background='transparent'" style="cursor: pointer;">
<span wicket:id="stage31"><strong>Stage 1</strong>Start</span><i></i></li>
<li class="past" onMouseOver="this.style.background='#e3e3e3'" onMouseOut="this.style.background='transparent'" style="cursor: pointer;">
<span wicket:id="stage32"><strong>Stage 2</strong>This is stage 2</span><i></i></li>
<li class="present"><span><strong>Stage 3</strong>This is stage 3</span><i></i></li>
<li class="future" onMouseOver="this.style.background='#e3e3e3'" onMouseOut="this.style.background='transparent'" style="cursor: pointer;">
<span wicket:id="stage34"><strong>Stage 4</strong>This is stage 4</span><i></i></li>
<li class="future"><span><strong>Stage 5</strong>Finish</span><i></i></li>
</ul>