Question

这些伪元素现在已经绊倒了我，我对此一点感到困惑。

在这个例子中：

div::before {
  content: "hi";
}

在任何HTML内容之前注入 hi 。我理解一个clearfix，你需要清除浮动。

.clear:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: -1px
     }

但是在这里：

.box-content::before {
     display: inline-block;
     content: " "
}

以上是否与：

相同

.box-content {
     display: inline-block;
     /* rest of the styles here */
}

我最近看到了：

header::after, section::after, article::after, footer::after, header::before, section::before, article::before, footer::before {
    content: " ";
    display: table
}

这与基本上相同是否具有所有这些不同的样式，但是每个元素都单独添加了display: table;样式？看到没有content: " ";被添加到div。

如果您将float:left添加到div中，会发生什么：

.larger-box-content {
      float: left
}

.larger-box-content::before {
      display: table;
      content: " "
}

在上面的例子中，这是某种类型的黑客，因为有问题的div正在浮动，为什么你需要在div之前display: table; ::？

::之前和::之后的样式如何影响当前的div？

Answer 1

:before实际上不是pseudo class，而是pseudo element。

CSS 伪元素是添加到选择器的关键字，可让您设置所选元素的特定部分的样式。

在该链接中，它还解释了

::before创建一个伪元素，它是所选元素的第一个子元素。它通常用于向具有content属性的元素添加化妆品内容。

伪元素＆＃39;样式不会影响它们所附加元素的样式。然而，它们可能会影响该元素的位置或（最终结果）外观。

伪元素的应用从添加内容到清除浮动到创建图标而不使用图像有所不同：https://css-tricks.com/pseudo-element-roundup/

<强>更新

回答您关于::before样式display: table的问题，作为简短回答，是的，它是 clearfix 黑客。

这些文章可以为您提供有关 clearfix 需求的更多信息及其背后的一些历史记录：

Answer 2

这是一个信息图：

< [元素开始] [::before] ELEMENT CORE [::after] [元素结束] >

::before和::after伪元素不是，而是在相关元素之前和之后。

它们位于“元素核心”之前的元素的最开头，位于“元素核心”之后的元素的最末端。

元素不会从其子伪元素

继承样式

如果您需要一个元素具有红色背景颜色，并且您为其::before伪元素提供红色背景颜色，则不会为该元素提供红色背景颜色。

伪元素如何使当前div表现出来？

2 个答案: