Pseudo elements :after, :before only work with non-replaced elements

A replaced element is any element whose appearance and dimensions are defined by an external resource. Examples include images (<img> tags), plugins (<object> tags), and form elements (<button>, <textarea>, <input>, and <select> tags). All other elements types can be referred to as non-replaced elements.

Therefore, :before and :after only work with non-replaced elements. 

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

https://www.w3.org/TR/CSS2/generate.html#before-after-content