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

我正在尝试使用a标签和图标制作一个社交媒体按钮我想使用css将整个背景颜色设置为黑色，但当我尝试时，只有下半部分变成黑色。

Html:

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

我应该怎么做？

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

。社交媒体图标{
颜色：红色；
背景色：黑色；
显示：内联块；
}

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

。社交媒体图标{
颜色：红色；
背景色：黑色；
显示：内联块；
}

---

首先将

标记的显示更改为
内联块
，因为它是内联元素，然后使用伪选择器
：在
之后添加新的
样式
并使用
z-index
对齐图标的背面


。社交媒体图标{
显示：内联块；
位置：相对位置；
颜色：红色；
}
.社交媒体图标：之后{
内容：“；
位置：绝对位置；
左：2%；
底部：8px；
宽度：95%；
高度：25px；
背景：黑色；
z指数：-1；
边框右下半径：10px；
边框左下半径：10px；
}
首先将
标记的显示更改为
内联块
，因为它是内联元素，然后使用伪选择器
：在
之后添加新的
样式
并使用
z-index
对齐图标的背面


。社交媒体图标{
显示：内联块；
位置：相对位置；
颜色：红色；
}
.社交媒体图标：之后{
内容：“；
位置：绝对位置；
左：2%；
底部：8px；
宽度：95%；
高度：25px；
背景：黑色；
z指数：-1；
边框右下半径：10px；
边框左下半径：10px；
}

It works:）我可以问一下为什么需要将其设置为内联块吗？内联元素不能设置宽度或高度。详细的解释哦，我明白了。。。谢谢它可以工作：）我可以问一下为什么有必要将其设置为内联块吗？内联元素不能设置宽度或高度。详细的解释哦，我明白了。。。谢谢@弗朗西斯科如果我是对的，那么你已经要求将下半部图标样式设置为黑色。这就是上面的代码所做的。对不起，我的意思是我希望整个背景都是黑色的，但是当我尝试时，它没有工作。。。很抱歉造成混乱；）这没关系@Francisco，是的，这就是困惑：-），即使这样，如果你只是改变高度：在这个jsFiddle@Francisco之后，如果我是对的，那么你要求将下半部图标样式设置为黑色。这就是上面的代码所做的。对不起，我的意思是我希望整个背景都是黑色的，但是当我尝试时，它没有工作。。。很抱歉造成混乱；）这没关系@Francisco，是的，这就是困惑：-），即使这样，如果你只是改变高度：after，如在这个jsFiddle中
.social-media{
    .social-media-icon{
        color: red;
        background-color: black;
    }
}