CSS：在不向某些元素添加内容之后

Question

CSS：在不向某些元素添加内容之后我很难理解CSS的行为:after财产。根据规范(这里和这里):如他们的名字所示，:before和:after伪元素指定元素的文档树内容之前和之后的内容位置。这似乎没有对哪些元素具有:after(或:before)财产。然而，它似乎只适用于特定元素... <p>工作，<img>不是，<input>不是，<table>的确如此。我可以测试更多，但重点是。请注意，在不同的浏览器中，这似乎是非常一致的。是什么决定了对象是否可以接受:before和:after

Answer 1

img和input都是替换元素.

替换元素是由外部资源定义其外观和维度的任何元素。例子包括图像(<img>标签)，插件(<object>)，以及表单元素(<button>, <textarea>, <input>，和<select>标签)。所有其他元素类型都可以称为非替换元素。

:before和:after仅用于未替换的元素。

从…规格:

注意。本规范没有完全定义:before和:after替换元素(如HTML中的IMG)。这将在未来的规范中得到更详细的定义。

带着span:before, span:after，DOM看起来如下：

<span><before></before>Content of span<after></after></span>

显然，这是行不通的<img src="" />.