Icons separation and horizontal line behind - css

Question

I search any problem but without results. Have big problem with separation of icons in inline-block after add css spearation ::after and ::before in the middle icon and with rwd of it.here's my code.
HTML:
<div class="icon-box">
<div class="icon_1"></div>
<div class="icon_2"></div>
<div class="icon_3"></div>
</div>
CSS:
.icon_1 {
float: left;
display: inline-block;
height: 66px;
width: 66px;
background-image: url("../img/timing_icon.png");
background-color: #97735e;
background-position: center;
background-repeat: no-repeat;
}
.icon_2 {
float: left;
display: inline-block;
height: 66px;
width: 66px;
background-image: url("../img/presentation_icon.png");
background-color: #97735e;
background-position: center;
background-repeat: no-repeat;
}
.icon_3 {
float: left;
display: inline-block;
height: 66px;
width: 66px;
background-image: url("../img/accurate_icon.png");
background-color: #97735e;
background-position: center;
background-repeat: no-repeat;
}
.icon_2::before,
.icon_2::after {
display: inline-block;
content: "";
height: 10px;
border-bottom: 1px solid #97735e;
width: 100%;
}
.icon_2::before {
right: 100%;
margin-right: 10%;
}
.icon_2::after {
left: 100%;
margin-left: 200%;
}
I think my code is very messy and got to fix.
effect,what I want get enter image description here

Answer 1

first. you have common styles for all the .icon_1,.icon_2,.icon_3 divs except the background-image . so, give a common class icon for example, to all those divs, or, if you can't change the HTML , use .icon_1,.icon_2,.icon_3 instead of .icon in my example below. but don't write the same styles 3 times.
second. either use display:inline-block either use float:left . i chose to use float:left; because inline-block adds additional whitespaces between elements. ( if you want to use inline-block let me know . there are ways to override the whitespaces . )
third. add margin:0 15px to .icon_2 which adds margin-left and margin-right of 15px
fourth. add the pseudo-element ( :before in my example ) to the div that wraps the three icons ,respectively .icon-box . and style it as you want.
i added z-index:-1 so that the line ( :before ) goes under the icons.
added background:red to it so you can see that it goes under the icons.
.icon {
float:left;
height: 66px;
width: 66px;
background-color: #97735e;
background-position: center;
background-repeat: no-repeat;
position:relative;
}
.icon_1 {
background-image: url("../img/timing_icon.png");
}
.icon_2 {
background-image: url("../img/presentation_icon.png");
margin:0 15px;
}
.icon_3 {
background-image: url("../img/accurate_icon.png");
}
.icon-box { position:relative;width:auto;float:left;}
.icon-box:before {
content:"";
position:absolute;
height:1px;
background:red;
top:50%;
width:100%;
left:0;
z-index:-1;
}
<div class="icon-box">
<div class="icon icon_1"></div>
<div class="icon icon_2"></div>
<div class="icon icon_3"></div>
</div>