html - :before :after pseudo selector without content?的目的是什么

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 用于插入内容并设置插入内容的样式。

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

谢谢

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

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

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