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

Question

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

我很难理解CSS的行为:after财产。根据规范(这里和这里):

如他们的名字所示，:before和:after伪元素指定元素的文档树内容之前和之后的内容位置。

这似乎没有对哪些元素具有:after(或:before)财产。然而，它似乎只适用于特定元素... <p>工作，<img>不是，<input>不是，<table>的确如此。我可以测试更多，但重点是。请注意，在不同的浏览器中，这似乎是非常一致的。是什么决定了对象是否可以接受:before和:after

Answer 1

img和input都是替换元素.替换元素是由外部资源定义其外观和维度的任何元素。例子包括图像(<img>标签)，插件(<object>)，以及表单元素(<button>,&nbsp;<textarea>,&nbsp;<input>，和<select>标签)。所有其他元素类型都可以称为非替换元素。:before和:after仅用于未替换的元素。从…规格:注意。本规范没有完全定义:before和:after替换元素(如HTML中的IMG)。这将在未来的规范中得到更详细的定义。带着span:before, span:after，DOM看起来如下：<span><before></before>Content&nbsp;of&nbsp;span<after></after></span>显然，这是行不通的<img src="" />.