Overflow: hidden not work - css

Question

In image their are border that overlapped with my social icon i can't fix that
See in the pic
Border are come in background of social icons
This is my HTML
<div class="social text-center">
<p class="icons">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</p>
<div class="divider">
</div>
This is css
.social {
position: relative;
}
.divider {
position: absolute;
border-top: 2px solid #fff;
width: 100%;
top: 50%;
}
Please solve this problem.
Thanks in advance :)

Answer 1

it's very simple if you use pseudo elements
check the snippet
.social {
overflow: hidden;
background: #333;
padding: 10px 5px;
text-align: center;
}
.icons {
position: relative;
display: inline-block;
vertical-align: top;
padding: 0 10px; /* you can use this padding for the space between icons and border */
}
.icons:before {
content: '';
position: absolute;
top: 50%;
right: 100%;
width: 9999px;
height: 1px;
background: #fff;
}
.icons:after {
content: '';
position: absolute;
top: 50%;
left: 100%;
width: 9999px;
height: 1px;
background: #fff;
}
<div class="social text-center">
<div class="icons">
<i class="fa fa-facebook" aria-hidden="true">123</i>
<i class="fa fa-google-plus" aria-hidden="true">123</i>
<i class="fa fa-youtube" aria-hidden="true">123</i>
<i class="fa fa-twitter" aria-hidden="true">123</i>
<i class="fa fa-instagram" aria-hidden="true">123</i>
</div>
</div>
<!-- remove "123" from icon -->

Answer 2

I am not sure where you want to put divider but following css will put at bottom.
.social {
position: relative;
}
.divider {
position: relative;
border-top: 2px solid #fff;
width: 100%;
}

Answer 3

.social {
width: 100%;
text-align: center;
}
.social h6 {
text-align: center;
font-size: 16px;
color: #a5a5a5;
font-weight: 300;
margin: 15px 0px;
display: inline-block;
position: relative;
}
.social h6:after,
.social h6:before {
content: '';
position: absolute;
width: 130px;
height: 1px;
display: block;
background-color: #a5a5a5;
}
.social h6:after {
right: 95px;
top: 12px;
}
.social h6:before {
left: 95px;
top: 12px;
}
<div class="social">
<h6>Follow Us</h6>
</div>