Html 没有内容的：before:after伪选择器的用途是什么？

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

作者建议使用以下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的目的是什么

谢谢

这只是一个常规格式语句…它不尝试在此处插入内容，因此不需要

content

属性

对于框大小，伪元素不属于univeral选择器

*

，因此必须专门应用属性。

.ribbon{
背景色：5BC8F7；
}
.ribbon：：之前{
内容：“看这个橙色的盒子。”；
背景色：#FFBA10；
边框颜色：黑色；
边框样式：虚线；
填充：2rem；
保证金：2rem；
}

注意橙色框的位置。

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

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