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>

我怎样才能进入::之后进入？我是否正确理解虽然这样的条目出现在html中，但你实际上并没有直接编辑html？

Answer 1

使用伪元素在CSS中完成。

例如：

i::after {
  ...
}

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

Answer 2

::before和::after（您应该使用::，只有:只支持旧版用途）所谓的pseudo elements - 它们不存在在源代码中，但一旦处理完CSS就会插入。

您可以通过在样式表中定义它来设置样式。由于这种特殊行为，除了正常声明之外，您还可以选择定义其content。通常这只是静态内容，但很酷的是，你也有可能生成动态内容！

    span::before{ 
      content: "☺";
      color:blue;
      font-size:150%;
    }

    div::after{
      content: "dynamic content: "attr(data-value);
    }

<span> Hello </span>
<div data-value="Foo"></div>

如何在我的HTML中输入'：after'？

2 个答案: