[Solved] Overflow: hidden not work

by


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 -->

3

solved Overflow: hidden not work