为什么 HTML5 中输入元素的内容显示后不会出现 ::after？

输入字段的 CSS 伪元素

在 HTML5 中，使用 CSS 伪元素添加视觉提示以形成输入可以增强用户体验。人们可能会尝试使用 ::before 和 ::after 伪元素进行样式设置，如以下示例所示：

<code class="css">input::after         { display: inline; }
input:valid::after   { content: ' ✓ '; color: #ddf0dd; }
input:invalid::after { content: ' ✗ '; color: #f0dddd; }</code>

但是，在显示输入元素的 ::after 内容时可能会遇到困难。尽管使用单冒号和双冒号、删除伪类并尝试不同的浏览器，内容仍然不可见。

而 ::after 伪元素可以在 div、span、p 和 等元素上无缝运行。 q，输入元素的情况并非如此。这种行为源于这些元素的一个基本属性：它们缺少文档树内容。

元素内容的角色

根据 CSS 规范 (http:// www.w3.org/TR/CSS21/generate.html), ::after 伪元素明确要求具有文档树内容的元素才能呈现其内容。输入元素与 img 和 br 类似，不包含此类内容。因此，根据设计，浏览器不会在输入字段的内容之后显示 ::after 内容。

以上是为什么 HTML5 中输入元素的内容显示后不会出现 ::after？的详细内容。更多信息请关注PHP中文网其他相关文章！