Question

我从here得到了这段代码：

div.grid:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

即使我删除，也没有任何反应。所以，没有意义。

我发现基于:before和:after的许多技巧现在都在使用。我想了解这一点，所以问道。

Answer 1

如果您要求共享的代码片段，则会清除浮动元素，比如说你有这个

~~Demo~~ （没有:after伪自我清除父母）

Demo 2（使用:after清除浮动元素的属性）

如果你具体询问:after，那就像虚拟元素一样。它只是添加内容after元素。您还有:before，之后会添加内容。默认情况下，伪生成的内容为inline。

这个功能非常方便，当你想在元素之前或之后添加一些内容时，现在你会说这在现实世界中是如何真正有用的，而不是将它视为2个元素，你可以像{ {1}}使其成为像

这样的块级别

div

只会在DOM中保存2个元素，我想分享几个链接，我已经使用此功能来减少HTML ...

Answer 2

此“clearfix”生成伪元素并将其显示设置为表。这将创建一个匿名表单元格和一个新的块格式化上下文，这意味着：before伪元素可防止上边距折叠。：after伪元素用于清除浮点数。因此，无需隐藏任何生成的内容，并且减少了所需的代码总量。

包括：before选择器不需要清除浮点数，但它可以防止顶级边距在现代浏览器中崩溃。这有两个好处：

1.它确保与其他浮动包含技术的视觉一致性，这些技术可创建新的块格式化上下文，例如overflow：hidden

2.当应用zoom：1时，它确保与IE 6/7的视觉一致性。

Answer 3

与:after结合使用的

content可用于在元素之后添加内容。试试这个：

span:after {
    content: "world"
}

<span>Hello </span>

Answer 4

此代码用于清除浮动 :before和:after可用于多种目的，而且非常有用

例如，如果您想将$添加到货币

.currency:before{
   content :'$';
}

这将为所有类货币添加$，因此节省了大量时间这是jsfiddle

结帐此link