Question

我不时看到这样的模式：

::before {
  content: '';
}
::after {
  content: '';
}
li::first-child {
  content: '';
}

我不明白它的真正作用。我知道'content'属性会替换元素，但是通常我们会替换什么？是否存在我们将其用作解决方案的“问题”？

需要明确的是，我了解什么是伪选择器。我的问题特别是关于为什么我们使用内容：“”。如果:: before在将元素绘制到DOM之前创建内容，那么为什么要创建一个空的内容字符串？这会增加什么价值？

Answer 1

据我了解您问题的性质，我们必须指出两点：

如何考虑:: before和:: after伪元素

这些伪元素不会放在它们所引用的元素之前或之后。既不及时（因此不会在之前或之后渲染），也不以空间方式（不在前面/后面或之前/之后）渲染。 :: before和:: after伪元素是它们引用的元素的子元素。 :: before是第一个孩子，在所有其他孩子之前插入； :: after是最后一个孩子，在所有其他孩子之后插入。关于伪元素，这是一个非常重要的概念，我们需要记住。

内容是什么？

我将以此为依托W3C documentation。

用户代理应在所有媒体（包括非可视媒体）上支持此属性。

content属性决定在元素或伪元素内部呈现的内容。

对于元素，它仅具有一个目的：指定元素以正常方式呈现，或将元素替换为图像（可能还包含一些关联的“替代文字”）。

对于伪元素和边距框，它更强大。它控制元素是完全渲染，可以用图像替换元素还是用任意内联内容（文本和图像）替换。

您的思维方式（是由于我们必须解决一些问题）可能接近真实的答案。这可能与用户代理/浏览器呈现任何元素所需的内容有关，这就是为什么必须向伪元素中添加content: ''才能呈现它的原因。对于没有可见内容的其他元素，例如<div></div>，它是自动完成的，因此即使没有可见内容，但应用了样式，我们也可以将其用于自己的目的。

Answer 2

这些称为伪元素，通常在元素之前或之后创建content:时使用它们。它们的工作方式是在html结构中创建一个标记，然后您可以使用::before和::after选择器在样式表中为其设置样式。而且content属性不会替换任何东西，它是您的伪元素持有的值。您可以在这里阅读有关它们的更多信息：https://css-tricks.com/almanac/selectors/a/after-and-before/

模式是::内容前为“”？

2 个答案: