After doing some searching online, I'm still puzzled by the behavior of pseudo elements like :before and :after.
Let's say I have a div with various elements inside - paragraphs, links, icons, etc. If I add an :after pseudo element to one of the links and fill it with content such as an icon.
a:after{
content:"\f001";
font-family: "Awesome icon font";
display: inline-block;
}
I can toggle the visibility of this element with a button click.
The problem arises when the element is hidden - the pseudo element doesn't appear in the DOM. It only shows up once I toggle its visibility from display:none; to something else like display: inline-block;.
For example, I have a navigation menu that slides up or down when clicking on a 'hamburger' icon. One of the menu items is a shopping cart icon. While all the text menus slide smoothly, the shop icon appears late, giving a sloppy appearance.
Why does the display value of the containing element affect the visibility of pseudo elements, even though they themselves have a different display value than none? Additionally, if the container has display: none;, the pseudo element is not shown in the DOM.
EDIT:
Here is an example fiddle for reference: http://jsfiddle.net/at4u56fy/