CSS背景颜色只在下半部分工作

Question

我正在尝试使用标记和fontawesome图标制作社交媒体按钮。 我想通过使用css将整个背景颜色变为黑色，但是当我尝试它时，只有下半部分变为黑色。

Html：

<div class="social-media">
    <a class="social-media-icon">
        <i class="fa fa-instagram fa-4x" aria-hidden="true"></i>
    </a>
</div>

Css（减）：

.social-media{
    .social-media-icon{
        color: red;
        background-color: black;
    }
}

我该怎么办？

Answer 1

使图标成为（内联）块元素。

.social-media-icon {
  color: red;
  background-color: black;
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="social-media">
  <a class="social-media-icon">
    <i class="fa fa-instagram fa-4x" aria-hidden="true"></i>
  </a>
</div>

Answer 2

首先将a tag的显示更改为inline-block，因为它是内联元素，然后使用伪选择器:after添加新styling并使用{{1将fontawesome图标对齐。

＆＃13;

＆＃13;

z-index

＆＃13;

.social-media-icon {
  display: inline-block;
  position: relative;
  color: red;
}

.social-media-icon:after {
  content: "";
  position: absolute;
  left: 2%;
  bottom: 8px;
  width: 95%;
  height: 25px;
  background: black;
  z-indeX: -1;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

＆＃13;

＆＃13;

＆＃13;