css - 为什么这个选择器：在使用一段 CSS 代码之后？

Question

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

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

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

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

score 1 · Accepted Answer

如果您正在询问您共享的代码，它会清除浮动元素，例如您有这个

演示（没有:after伪到自我清除父级）

Demo 2（:after配合属性清除浮动元素）

如果您要专门询问:after它，那么它就像一个虚拟元素。它只是after为元素添加内容。你也有:beforewhich 会在之前添加内容。默认情况下是伪生成的内容inline。

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

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

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

score 1 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

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

span:after {
    content: "world"
}

<span>Hello </span>

score 0 · Accepted Answer

此代码用于清除浮动 :before，:after可以用于多种用途，并且非常有用

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

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

这会将 $ 添加到所有类货币中，因此可以节省大量时间这里是jsfiddle

签出此资源链接

4 回答 4