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 (<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.
: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:
<span><before></before>Content of span<after></after></span>
Evidently, that won't work with <img src="" />
.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…