为什么 CSS :after 不能处理所有 HTML 元素？

CSS :after 行为和元素兼容性

CSS :after 属性扩展文档流中元素之后的内容。然而，并非所有元素似乎都支持这种行为。为什么 :after 只能作用于某些元素？

答案：替换元素与非替换元素

根据 CSS 规范，只有非替换元素可以具有 :before 和 :after 属性。替换元素的外观和尺寸由外部确定，包括图像、插件和表单控件等元素。

什么是替换元素？

替换元素包括：

• 图片()
• 插件 (
• 表单元素（、、<input>、<select>）</select>

为什么：之前和之后不要使用替换元素

CSS 规范指出，:before 和 :after 与替换元素的交互尚未完全定义。此方面为将来的规范保留。

示例

考虑以下示例：

<span>Content of span</span>

span:before {
  content: "Before ";
}

span:after {
  content: " After";
}

此部分的 DOM 结构示例将是：

<span>
  <before>Before </before>
  Content of span
  <after> After</after>
</span>

此结构不适用于图像等替换元素因为它们没有与非替换元素相同的内容。

因此，CSS :after 属性只能与非替换元素一起使用，因为它们的外观由元素内的内容决定本身。

以上是为什么 CSS :after 不能处理所有 HTML 元素？的详细内容。更多信息请关注PHP中文网其他相关文章！