溢出：隐藏不起作用

Question

在图像中，他们的边框与我的社交图标重叠，我无法解决这个问题 见图

边界来自社交图标背景

这是我的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>

这是css

.social {
    position: relative;
}
.divider {
    position: absolute;
    border-top: 2px solid #fff;
    width: 100%;
    top: 50%;
}

请解决此问题。

提前致谢:)

Answer 1

我不确定你想把divider放在哪里但是跟随css会放在底部。

$state

Answer 2

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

Answer 3

如果你使用pseudo elements

，这很简单

检查代码段

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;