Deleting the last ":before" element - html

Question

Hi guys so i am making a simple diagram which has 5 boxes and then arrows after them so it should look like this :
- > - > - > - > -
However for some reason i have an extra arrow appearing after the fifth box and i dont want this, Any help on getting rid of the last arrow would be great
.work_process {
position: relative;
text-align: center;
margin: 0 auto;
}
.work_process:before {
font-family: FontAwesome;
content: '\f178';
margin-top: -10px;
position: absolute;
right: -10px;
top: 40%;
font-size: 32px;
}
.work_process .work_process-box {
outline: 4px solid #FFFFFF;
border-radius: 50%;
height: 120px;
margin: 2em auto 3em;
padding: 16px 10px;
width: 120px;
}
.work_process-box i {
font-size: 32px;
line-height: 52px;
width: 52px;
color: #FFFFFF;
}
.work_process-box h4 {
font-weight: 400;
margin: 0;
color: #FFFFFF;
}
<div class="parallax2">
<div class="info1">
<h1>DESGIN PROCESS</h1>
<span class="border"></span>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-lightbulb-o"></i>
<h4>IDEA</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-bank"></i>
<h4>DESIGN</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-comments-o"></i>
<h4>DEVELOP</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-desktop"></i>
<h4>TEST</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-rocket"></i>
<h4>LAUNCH</h4>
</div>
</div>
<!-- work_process -->
</div>
</div>
</div>
</div>

Answer 1

This following code will fix it:
.row > div:last-child .work_process:before { content: ""; }
This code selects the last immediate child of the .row div, and selects the .work_process:before of that child, and sets the content to nothing.
.row > div:last-child .work_process:before { content: ""; }
.work_process {
position: relative;
text-align: center;
margin: 0 auto;
}
.work_process:before {
font-family: FontAwesome;
content: '\f178';
margin-top: -10px;
position: absolute;
right: -10px;
top: 40%;
font-size: 32px;
}
.work_process .work_process-box {
outline: 4px solid #FFFFFF;
border-radius: 50%;
height: 120px;
margin: 2em auto 3em;
padding: 16px 10px;
width: 120px;
}
.work_process-box i {
font-size: 32px;
line-height: 52px;
width: 52px;
color: #FFFFFF;
}
.work_process-box h4 {
font-weight: 400;
margin: 0;
color: #FFFFFF;
}
<div class="parallax2">
<div class="info1">
<h1>DESGIN PROCESS</h1>
<span class="border"></span>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-lightbulb-o"></i>
<h4>IDEA</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-bank"></i>
<h4>DESIGN</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-comments-o"></i>
<h4>DEVELOP</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-desktop"></i>
<h4>TEST</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-rocket"></i>
<h4>LAUNCH</h4>
</div>
</div>
<!-- work_process -->
</div>
</div>
</div>
</div>