I\'m having trouble understanding the behavior of the CSS :after
property. According to the spec (here and here):
As their names indicate
img
and input
are both replaced elements.
A replaced element is any element whose appearance and dimensions are defined by an external resource. Examples include images (
tags), plugins (
tags), and form elements (
,
,
, and
tags). All other elements types can be referred to as non-replaced elements.
:before
and :after
only work with non-replaced elements.
From the spec:
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.
With span:before, span:after
, the DOM looks like this:
Content of span
Evidently, that won't work with .