Overflow: hidden not work

debugcn Published at Dev

Satyam Dhameliya

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

Lucian

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

Collected from the Internet

Please contact [email protected] to delete if infringement.