Html 伪元素可见性行为

我在谷歌上搜索了一下，但也许这里有人可以向我解释为什么伪元素，即

：before

和

：after

，会有这样的行为

我有一个content div，里面有一些元素——段落、锚定、图标等等。假设在一个锚定元素上我添加了一个

：在
伪元素之后，并用一个显示图标的内容填充它

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

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

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

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

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

编辑：

小提琴示例：
让我们看看文档中是怎么说的

关于

此值导致元素不显示在视图中
（即，在视觉媒体中，元素不生成框，也没有
对布局的影响）。子体元素不生成任何框
任何一个元素及其内容将从格式设置中删除
结构完整。此行为不能通过设置
子体上的“display”属性

请注意，显示“无”不会创建不可见的框；
它根本不创建任何框。CSS包括启用
元素以在格式结构中生成影响
格式化，但本身不可见。请参阅本节
有关详细信息，请参阅

进一步说，它说：

从带注释的文档树中，生成格式结构。
通常，格式结构与文档树非常相似，
但它也可能存在显著差异，尤其是当作者使用
伪元素和生成的内容。首先，格式结构
根本不需要是“树形的”——结构的本质
取决于实施情况。第二，格式结构可能会改变
包含比文档树更多或更少的信息。例如，
如果文档树中的元素对于
“display”属性，则该元素在
格式化结构。另一方面，列表元素可以生成
格式化结构中的更多信息：列表元素的
内容和列表样式信息（例如，项目符号图像）

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

因此，如果元素设置为
display:none用户代理似乎忽略了CSS生成的内容。因此，您可能需要查看
可见性：隐藏应该适合您。
伪元素被插入到元素中，即它们被添加或附加到满足选择器的元素中。它们不是独立于元素的独立同级节点，因此将随所述元素一起消失。尝试将伪元素视为直接子元素，添加到元素的开头或结尾。因此，基本上，如果我想保持它们的可见性，我必须切换
可见性
规则，而不是
显示
。这很奇怪，因为当你有一个
display:nonediv容器上的规则，其中有一些元素，当您检查DOM时，它们仍然在那里（html代码在那里，它们里面的是什么），但是伪元素将完全消失。这让我有点困惑。最后一部分更像是Inspect/Firebug工具的问题。不需要显示不会生成的内容，因为元素具有
display:none
。无论是否使用
：hover
和
：focus
：在这种情况下都不会发生。您是否尝试过“可见性：隐藏”？我想我必须使用
可见性
属性来避免此问题。感谢您的解释。我想我必须找到一种方法，利用jquery切换和可见性切换来上下切换，而不是显示切换。@dingo_d在前面切换类我在设置菜单时遇到了一些问题，因为单击我会显示菜单，当菜单未显示时，你可以看到页面的面包屑，我终于用jquery使所有的工作都很好、顺利。当我尝试用css创建相同的效果时，我遇到了一些麻烦（无法将外部容器设置为
overflow:hidden；
，因为我有下拉菜单），这排除了
transform:translateY（）css规则。