我在理解CSS:after属性的行为时遇到了麻烦。根据规范和此处
:after
顾名思义，:before和:after伪元素指定元素的文档树内容之前和之后的内容位置。
:before
这似乎并未限制哪些元素可以具有:after（或:before）属性。但是，它似乎仅适用于特定元素 … <p>有效，<img>无效，<input>无效<table>。我可以测试更多，但重点是。请注意，这在各个浏览器中似乎非常一致。 是什么决定对象是否可以接受:before和:after属性？
<p>
<img>
<input>
<table>
img和input都是被替换的元素。
img
input
替换的元素是其外观和尺寸由外部资源定义的任何元素。实例包括图像（<img>标记），插件（<object>标签），和形式的元件（<button>，<textarea>， <input>，和<select>标签）。所有其他元素类型都可以称为不可替换元素。
<object>
<button>
<textarea>
<select>
:before 并且:after仅适用于不可替换的元素。
从规格：
注意。该规范并未完全定义替换元素（例如HTML中的IMG）:before以及:after与替换元素的交互 。这将在以后的规范中更详细地定义。
使用span:before, span:after，DOM如下所示：
span:before, span:after
<span><before></before>Content of span<after></after></span>
显然，这不适用于<img src="" />。
<img src="" />
