CSS：在不向特定元素添加内容之后
我无法理解CSS的行为:after属性:after 。 根据规范（ 这里和这里 ）：
正如它们的名字所表示的那样
:before和:after伪元素指定元素的文档树内容之前和之后的内容的位置。
这似乎没有限制哪些元素可以具有:after （或:before ）属性。 但是，它似乎只适用于特定的元素 … <p>工作， <img>不， <input>不， <table> 。 我可以testing更多，但重点是。 请注意，这在浏览器中看起来非常一致。 什么决定一个对象是否可以接受:before和:after属性？
img和input都是被replace的元素 。
被replace的元素是其外观和尺寸由外部资源定义的任何元素。 示例包括图像（
<img>标签），插件（<object>标签）和表单元素（<button>，<textarea>，<input>和<select>标签）。 所有其他元素types可以被称为非replace元素。
:before和:after仅与非replace元素一起工作。
从规格 ：
注意。 本规范并没有完全定义
:before和:after的replace元素（如HTML中的IMG）的交互。 这将在未来的规范中更详细地定义。
用span:before, span:after ，DOM看起来像这样：
<span><before></before>Content of span<after></after></span>
显然，这不适用于<img src="" /> 。
:before和:after 不需要replace元素，CSS规范没有指定他们如何为它们工作，replace元素的概念有些模糊。
CSS 2.1规范清楚地表明 ，它们可以replace元素，只是说它不能“完全定义”。 这涉及被replace的元素被期望具有其自己的不被CSS控制的视觉渲染的问题，而伪元素应该向该元素的内容添加一些东西。 该规范补充说，这将在未来的规范中“更详细地”定义，但目前还没有发生。
浏览器厂商只是决定通过不为一些元素实现这些伪元素来避免问题。
根本不清楚“替代元素”是什么意思，意思似乎有所改变。 它经常被解释为与空元素（一个带有EMPTY声明的内容的元素，即一个不能有任何内容的元素）相同的意思，但CSS 2.1本身显示了一个带有select器br:before的示例样式表 （虽然浏览器忽略了这个，实行自己的方式）。 可以说，越来越多的元素已经进入了CSS渲染的范围，至less部分。 例如，在现代浏览器中， input元素（包括字体，颜色等）在很大程度上可以通过CSS控制。
当前的浏览器（Firefox，IE，Chrome）似乎不支持:after和:before hr之外的空元素的伪元素。 对于hr ，IE和Chrome将生成的内容放置在一个有边框的框中，这是hr的实现; 内容使箱子更高。 Firefox将这两个（！）伪元素的内容放在hr实现的横向规则之后。 这种变化说明了CSS 2.1中提到的“交互”问题。
通常声称这些伪元素不能用于空元素，因为它们的HTML定义不允许任何内容。 这是一个类别错误。 标记语言的语法规则不会限制在CSS中可以执行的操作
总而言之:after和:before当前不能用于空元素（除了小数点以外），但这主要是由于实现，并可能在将来改变。
