为什么这个选择器:在使用一段CSS代码之后

我从这里得到了这段代码：

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

即使我删除，也没有任何反应。所以，说不通。

我看到许多基于:before的技巧，这些技巧现在正在使用:after。我想明白这一点，所以问道。

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

包含：before 选择器对于清除浮点数不是必需的，但它可以防止在现代浏览器中上边距折叠。这有两个好处：

1.It 确保与其他浮点包含技术在视觉上的一致性，这些技术创建新的块格式上下文，例如，溢出：隐藏

2.It 可确保在应用缩放：1时与IE 6/7的视觉一致性。

如果你要求你分享的那段代码，它会清除浮动元素，例如你有这个

演示 (没有伪:after自我清除父级(

演示 2(使用带有属性的 :after 清除浮动元素(

如果你专门问:after，它就像一个虚拟元素。它只是after元素添加内容。您还有:before，它将在之前添加内容。默认情况下，伪生成的内容inline。

这个功能非常方便，当你想在元素之前或之后添加一些内容时，现在你会说这在现实世界中是如何真正有用的，而不是将其视为 2 个元素，您可以通过使其成为块级别来使其像div一样运行

div.class_name:before, 
div.class_name:after {
   display: block;
}

只会在 DOM 中为您保存 2 个元素，我想分享一些我使用此功能来减少 HTML 的链接......

在这里回答 - 演示

MDN 参考 |支持

:after与

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

span:after {
    content: "world"
}
<span>Hello </span>

http://jsfiddle.net/d3M99/

此代码用于清除浮点数 :before和:after可以服务于许多目的，而且它真的很有用

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

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

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

查看此资源链接

相关内容