CSS 伪选择器 :after 除了设置内容还有什么作用？ [复制]答案

【问题标题】：What does the CSS pseudo selector :after do other than set content? [duplicate]CSS 伪选择器 :after 除了设置内容还有什么作用？ [复制]
【发布时间】：2016-05-20 16:27:16
【问题描述】：

有人可以解释这段来自 Bootstrap 的代码在做什么吗？

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

我了解 box-sizing 部分。

我想我明白 *:after。但是我熟悉这种用法：

*:after {
  content: 'hello world'
}

在没有内容属性的情况下，这是在做什么？是说“所有插入 :after 的元素也应该有 box-sizing 'border-box'” - 还是别的什么？

【问题讨论】：

创建一个伪元素（大小、颜色、格式等...）。在这种情况下，box-sizing 是为了防止伪元素不超过大小，即使有填充。
我相信 OP 困惑的是为什么 * 不够好，无法涵盖所有内容。

标签： css twitter-bootstrap-3

【解决方案1】：

    *:before,
    *:after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }

这部分描述了我的意思是任何标签或类或 ID 具有 :before 或 :after 之后将具有边框框的 box-sizing 属性。

就像，如果任何 div 有一个伪元素并且它有一个边框属性，那么它的 box-sizing 属性将自动成为边框框，除非你像这样覆盖该属性：

div:before{
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box; 
}

【讨论】：