我无法理解 CSS 的行为 :after
属性(property)。根据规范(here 和 here):
As their names indicate, the
:before
and:after
pseudo-elements specify the location of content before and after an element's document tree content.
这似乎没有限制哪些元素可以有 :after
(或 :before
)属性(property)。但是,它似乎只适用于 specific elements ... <p>
作品,<img>
没有,<input>
没有,<table>
做。我可以测试更多,但重点是。请注意,这在浏览器中似乎非常一致。 是什么决定了一个对象是否可以接受一个:before
和 :after
属性(property)?
最佳答案
img
和 input
都是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
和 :after
仅适用于非替换元素。
来自 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.
与 span:before, span:after
,DOM 看起来像这样:
<span><before></before>Content of span<after></after></span>
显然,这不适用于 <img src="" />
.
关于CSS :after not adding content to certain elements,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29254229/