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

【问题标题】：Why this selector:after Piece of CSS Code is Used?为什么这个选择器：在使用一段 CSS 代码之后？
【发布时间】：2013-10-05 23:25:54
【问题描述】：

我从here得到了这段代码：

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

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

我看到很多基于:before 和:after 的技巧现在都在使用。我想明白这一点，所以问。

【问题讨论】：

标签： css

【解决方案1】：

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

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

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

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

【讨论】：

你的答案得到了投票，但你的答案对我来说就像代码一样神秘。阅读和阅读有意义。
@SatyaPrakash 根据他的问题，我认为这是解释他的最佳方式
可能！在可视化上下文“上边距崩溃”时发现困难，然后清除浮动。我得到了明确的浮动，但只是明确的：浮动在元素上不起作用，这节省了所需的总代码量等。
我理解 :before 和 :after 用于插入内容，但这些技巧很难理解。 1+虽然给我心灵的食物。 :)
@SatyaPrakash 老兄，我得跑了。我会尽快给你反馈。每当您在任何元素中使用 float 属性并且会发现父元素折叠时，请尝试在浮动元素的末尾使用 clearfix 类。谢谢

【解决方案2】：

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

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

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

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

当你想在元素之前或之后添加一些内容时，这个功能真的很方便，现在你会说这在现实世界中如何真正有用，而不是将其视为 2 个元素，你可以让它们像@ 987654338@ 将其设为块级别，例如

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

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

【讨论】：

你已经给出了很多例子，也许是为了让 :after 和 :before 更有意义。投票赞成。需要花更多时间来理解它，因为 :after :before 对我来说是很少使用的东西。
@SatyaPrakash 谢谢，几分钟后我才在这里回答，您可以查看stackoverflow.com/a/19197623/1542290，并简单地使用它，因为它会创建一个虚拟元素，但您需要使用content: "";为此

【解决方案3】：

:after 和content 可以用来在元素之后添加内容。试试这个：

span:after {
    content: "world"
}

<span>Hello </span>

【讨论】：

【解决方案4】：

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

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

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

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

查看此资源link

【讨论】：