為什麼 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中文網其他相關文章！