为什么 CSS `:after` 不向图像和输入等替换元素添加内容？

CSS :after 不向某些元素添加内容

CSS :after 属性用于在文档树中的元素之后插入内容。但是，它似乎仅适用于特定元素，例如段落 (

) 和表格 (

)，但不适用于图像 (<img src="/static/imghwm/default1.png" data-src="image.png" class="lazy" alt="为什么 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="/static/imghwm/default1.png" data-src="image.png" class="lazy" alt="为什么 CSS `:after` 不向图像和输入等替换元素添加内容？" >

img:after {
  content: "After";
}

这是因为 :after 无法改变被替换元素的外观。

以上是为什么 CSS `:after` 不向图像和输入等替换元素添加内容？的详细内容。更多信息请关注PHP中文网其他相关文章！