CSS 背景颜色仅适用于下半部分

Question

我正在尝试使用 a 标签和 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 并使用z-index 对齐fontawesome 图标的背面。

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

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