CSS :after 不向某些元素添加内容
CSS :after 属性用于在文档树中的元素之后插入内容。但是，它似乎仅适用于特定元素，例如段落 (
) 和表格 (
)，但不适用于图像 (![为什么 CSS `:after` 不向图像和输入等替换元素添加内容？]()
) 和表单输入 () 等替换元素。 ).什么决定了 :after 和 :before 的可接受性属性？
:after 和 :before 的行为取决于替换元素功能不同的事实。替换元素是那些外观和尺寸由外部资源定义的元素，例如图像、插件和表单元素。
根据 CSS 规范，:before 和 :after 只适用于非替换元素。这意味着它们不能用于在替换元素之前或之后添加内容。
Span 示例
考虑以下 HTML：
<span>Content of span</span>
登录后复制
使用以下 CSS：
span:before {
content: "Before";
}
span:after {
content: "After";
}登录后复制
此场景的 DOM 看起来像this:
<span>
<before>Before</before>
Content of span
<after>After</after>
</span>
登录后复制
此结构演示了 :before 和 :after 如何在非替换元素之前和之后插入内容。
图像异常
但是，对图像使用 :after 不会产生相同的结果结果：
<img src="image.png" />
登录后复制
img:after {
content: "After";
}登录后复制
这是因为 :after 无法改变被替换元素的外观。
以上是为什么 CSS `:after` 不向图像和输入等替换元素添加内容？的详细内容。更多信息请关注PHP中文网其他相关文章！
