CSS :after 在什么情况下无法在元素后面添加内容？

理解 CSS :after 对某些元素的限制

CSS :after 伪元素用于在元素的文档之后添加内容树内容。虽然 CSS 规范没有明确说明任何限制，但据观察，:after 仅适用于某些元素。

确定元素兼容性

决定元素兼容性的关键因素元素是否可以接受 :after 属性是指它是否是替换元素。被替换的元素，例如图像 () 和表单输入 ()，其外观和尺寸由外部资源定义。

CSS 规范明确指出 :before 和 :after 仅限使用非替换元素。这意味着替换的元素，例如：

背后的推理限制

不兼容源于替换元素未呈现为文档树的一部分。相反，它们被渲染为外部对象，因此浏览器不可能在它们之前或之后插入额外的内容。

DOM 结构示例

对于非- 替换的元素，例如 div 或 span、:before 和 :after 内容可以插入到 DOM 结构中。例如：

<span></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><before>Before Content</before>
Span Content
<after>After Content</after>