CSS :after not adding content to certain elements

Question

我无法理解 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)？

Answer 1

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="" /> .