html - 如何在 html 中输入 ':after'？

Question

我在我的网站中放置了 3 个社交媒体图标，我想为每个图标创建一个彩色背景。彩色背景需要分为两部分。第一部分是一个直接的矩形，第二部分需要进一步编辑才能创建所需的效果。

因此，我需要能够设置::after 元素的样式。我查看了我的源代码，但在任何地方都看不到它。我可以看到::before 条目，但看不到::after 条目。

相关代码为:

<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" id="social-media-icons">
        <i class="fa fa-facebook-square fa-fw fa-lg" id="facebook-icon" aria-hidden="true"></i>
        <i class="fa fa-twitter-square fa-fw fa-lg" id="twitter-icon" aria-hidden="true"></i>
        <i class="fa fa-instagram fa-fw fa-lg" id="instagram-icon" aria-hidden="true"></i>
</div>

如何进入::after entry？我的理解是否正确，虽然这样的条目出现在 html 中，但您实际上并不直接编辑 html？

Answer 1

这是使用伪元素在 CSS 中完成的。

例如:

i::after {
  ...
}

演示:http://www.codeply.com/go/2M4sgYmTw6