CSS :after not adding content to certain elements

Question

I\'m having trouble understanding the behavior of the CSS :after property. According to the spec (here and here):

As their names indicate

Answer 1

I've spent several hours plucking out my hair only to find that some other css override content (or display:none) property of my selector.

For example, if the following code is written in some other place, before or after element will never show:

#id > child:before {
  content: none!important;
}

  
    Before element is not showing
  

Just find the css which is overwriting your style and spam stronger selectors and !important to make it work

#id>child:before {
  content: none!important;
}

  
    Before element is showing