Pseudo element visibility behavior - html

Question

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/

Answer 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.