目的是什么：before：在没有内容的伪选择器之后？

Question

我正在阅读一篇关于边框的文章。

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

作者推荐以下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用于插入内容并设置插入内容的样式。

但是：没有内容之前和之后的目的是什么？

由于

Answer 1

/* 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属性。

伪元素不属于通用选择器*的盒子大小，因此必须专门应用该属性。

Answer 2

.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;
}

<span class="ribbon">Notice where the orange box is.</span>

正如您所看到的，填充和边距可适用于:before，对它们应用框大小是一种很好的技巧。