为什么不能插入/使用 ::BEFORE ::AFTER css 样式？答案

【问题标题】：Why Cant insert/use ::BEFORE ::AFTER css styles?为什么不能插入/使用 ::BEFORE ::AFTER css 样式？
【发布时间】：2015-05-21 17:48:06
【问题描述】：

我正在尝试使用：

.widget::before{
  background:red;
  height:20px;
  width:100%;
  content: "";   <---- if this is removed, then block is not visible at all
}

但如果没有content: "";，则根本不会显示伪块。伪类是否应该始终包含content 参数？

【问题讨论】：

【解决方案1】：

如果没有content: '';，则在小部件之前无需添加任何内容。您可以声明伪类的大小、颜色、形状等...但不声明“内容”是什么，就没有可插入的内容。

【讨论】：

【解决方案2】：

是的，应该。
CSS 伪元素用于向页面添加内容，因此它们必须有内容才能显示。
According to the Docs:

此属性与 :before 和 :after 伪元素一起用于在文档中生成内容。值具有以下含义：
无：没有生成伪元素。

这意味着伪元素必须具有要生成的内容。

【讨论】：

【解决方案3】：

使用 ::before 和 ::after 伪类的目的是使用 CSS 插入内容。如果没有为伪类声明 content 属性，则不会有任何更改可见

【讨论】：