伪元素可见性行为

Question

我google了一下，但也许这里有人可以向我解释为什么伪元素，即:before和:after会这样。

我有一个内容 div，里面有一些元素 - 段落、锚点、图标等。假设我在一个锚元素上添加了一个 :after 伪元素并填充了一个内容，该内容将显示图标

a:after{
    content:"\f001";
    font-family: "Awesome icon font";
    display: inline-block;
}

我可以通过单击按钮来切换该元素的可见性。

问题是当该元素被隐藏时，DOM 中不会显示任何伪元素。一旦我切换它的可见性（从display:none; 到，比如说display: inline-block;），就会显示伪元素。

在一个更具体的示例中，我有一个导航菜单，如果我单击“汉堡”菜单，可以隐藏或显示该菜单。一个导航项目是一个购物车图标。我通过单击菜单图标来切换上滑动画。所有的文本菜单都会很好地向上滑动，但只有当动画完成时，商店图标才会“弹出”。这看起来有点草率。

为什么会这样？为什么在嵌套伪元素的容器上的显示值控制伪元素的显示（即使它们本身的显示值与none 不同）？不仅影响它们的显示值，当你检查 DOM 时，如果容器有display: none; 值，就不会有任何伪元素存在。

编辑：

小提琴示例：http://jsfiddle.net/at4u56fy/

Answer 1

让我们看看文档是怎么说的......

关于display: none;

该值导致元素不会出现在formatting structure （即，在视觉媒体中，元素不生成框，也没有 对布局的影响）。后代元素不生成任何框 任何一个;元素及其内容从格式中移除 结构完全。此行为不能通过设置 后代的“显示”属性。

请注意，显示“无”不会创建不可见的框； 它根本没有创建任何盒子。 CSS 包括使 元素以在格式化结构中生成影响 格式化，但本身不可见。请查阅本栏目 在visibility了解详情。

进一步到formatting structure 它说：

从带注释的文档树中，生成格式结构。 通常，格式化结构与文档树非常相似， 但它也可能有很大不同，特别是当作者使用 伪元素和生成的内容。一、格式化结构 根本不需要“树形”——结构的性质 取决于实施。二、格式化结构可以 包含比文档树更多或更少的信息。例如， 如果文档树中的元素的值为“无” 'display' 属性，该元素不会在 格式化结构。另一方面，列表元素可能会生成 格式结构中的更多信息：列表元素的 内容和列表样式信息（例如，项目符号图像）。

请注意，CSS 用户代理不会更改文档树 这个阶段。特别是，由于样式表而生成的内容是 不反馈给文档语言处理器（例如，用于重新解析）。

因此，如果元素设置为display: none;，用户代理似乎会忽略 CSS 生成的内容。因此，您可能想看看 visibility: hidden; 应该适合您。