找到你要的答案

Q:Pseudo element visibility behavior

Q:伪元素可见性行为

I googled a bit, but maybe someone here can explain it to me why do pseudo elements, namely :before and :after, behave this way.

I have a content div, and inside it there are some elements - paragraphs, anchors, icon, etc. Let's say that on one anchor element I added an :after pseudo element and filled it with a content that will show an icon

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

I can toggle the visibility of that element with a click on a button.

The issue is that when that element is hidden, no pseudo element is shown in the DOM. Once I toggle it's visibility (from display:none; to, let's say display: inline-block;) the pseudo element will be shown.

In a more concrete example I have a nav menu, that can be hidden or shown if I click on a 'hamburger' menu. One nav item is a shopping cart icon. I'm toggling the slide up animation with the click on the menu icon. All the textual menus will slide up nicely, but only when the animation is finished will the shop icon 'pop' into existence. Which looks kinda sloppy.

Why is this happening? Why is the display value, on the container in which the pseudo elements are nested in, controlling the display of the pseudo elements (even though they themselves have a display value that is different from none)? Not only does it affect their display value, when you inspect the DOM, if the container has display: none; value, there won't be any pseudo element present.

EDIT:

Example fiddle : http://jsfiddle.net/at4u56fy/

我想了一下,也许这里有人能给我解释一下为什么伪元素,即:前和后,这样的行为。

我有一个内容div,里面有一些元素的段落,锚,图标,等我们说一锚元素我添加:在伪元素和填补它与内容,将显示一个图标

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

我可以切换该元素的知名度,点击一个按钮。

问题是,当这个元素是隐藏的,没有伪元素在DOM所示。一旦我切换它的可见性(从显示:没有;到了,让我们说,显示:内联块)伪元素将显示。

在一个更具体的例子,我有一个导航菜单,可以显示或隐藏如果我点击“汉堡包”菜单。一个导航项目是一个购物车图标。我切换幻灯片的动画菜单上点击图标。所有的文字菜单将幻灯片好,但只有当动画完成后,商店图标'流行'的存在。看起来有点邋遢。

为什么会这样?为什么在伪元素嵌套的容器中的显示值,控制伪元素的显示(即使它们本身有一个不同的显示值)?它不仅影响他们的显示值,当您检查DOM,如果容器已经显示:无;价值,不会有任何伪元素。

编辑:

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

answer1: 回答1:

Lets see what documentation says...

About display: none;

This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the 'display' property on the descendants.

Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.

Going further to formatting structure it says :

From the annotated document tree, generate a formatting structure. Often, the formatting structure closely resembles the document tree, but it may also differ significantly, notably when authors make use of pseudo-elements and generated content. First, the formatting structure need not be "tree-shaped" at all -- the nature of the structure depends on the implementation. Second, the formatting structure may contain more or less information than the document tree. For instance, if an element in the document tree has a value of 'none' for the 'display' property, that element will generate nothing in the formatting structure. A list element, on the other hand, may generate more information in the formatting structure: the list element's content and list style information (e.g., a bullet image).

Note that the CSS user agent does not alter the document tree during this phase. In particular, content generated due to style sheets is not fed back to the document language processor (e.g., for reparsing).

So its like if the element is set to display: none; user agents seem to ignore CSS generated content. Hence you might want to take a look at visibility: hidden; which should work for you.

让我们看看文档说明…

关于显示:无;

This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the 'display' property on the descendants.

Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.

进一步格式化结构它说:

From the annotated document tree, generate a formatting structure. Often, the formatting structure closely resembles the document tree, but it may also differ significantly, notably when authors make use of pseudo-elements and generated content. First, the formatting structure need not be "tree-shaped" at all -- the nature of the structure depends on the implementation. Second, the formatting structure may contain more or less information than the document tree. For instance, if an element in the document tree has a value of 'none' for the 'display' property, that element will generate nothing in the formatting structure. A list element, on the other hand, may generate more information in the formatting structure: the list element's content and list style information (e.g., a bullet image).

Note that the CSS user agent does not alter the document tree during this phase. In particular, content generated due to style sheets is not fed back to the document language processor (e.g., for reparsing).

这样如果元素设置为显示:无;用户代理似乎忽略了CSS生成内容。因此,你可能想看看可见性:隐藏;这应该为你工作。

html  css  css3