:before :after 没有内容的伪选择器的目的是什么？答案

【问题标题】：What is the purpose of :before :after pseudo selector without content?:before :after 没有内容的伪选择器的目的是什么？
【发布时间】：2015-09-07 01:27:12
【问题描述】：

作者推荐以下CSS代码：

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
 box-sizing: inherit;
}

我知道 :before 和 :after 用于插入内容并设置插入内容的样式。

但是没有内容的 :before 和 :after 的目的是什么？

谢谢

【问题讨论】：

标签： html css

【解决方案1】：

.ribbon {
   background-color: #5BC8F7;
}

.ribbon::before {
   content:          "Look at this orange box.";
   background-color: #FFBA10;
   border-color:     black;
   border-style:     dotted;
  padding: 2rem;
margin:2rem;
}

&lt;span class="ribbon"&gt;Notice where the orange box is.&lt;/span&gt;

如您所见，内边距和边距可应用于:before，在它们上应用框大小是一种很好的技术。

【讨论】：

【解决方案2】：

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
 box-sizing: inherit;
}

这只是一个通用格式声明...它不是要在此处插入内容，因此不需要 content 属性。

伪元素不属于用于 box-sizing 的通用选择器 *，因此必须专门应用该属性。

【讨论】：