Why Won\'t ::after Content Display for Input Elements in HTML5?

CSS Pseudo-Elements for Input Fields

In HTML5, adding visual cues to form inputs using CSS pseudo-elements can enhance user experience. One might attempt to use the ::before and ::after pseudo-elements for styling, as seen in the following example:

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

However, one may encounter difficulties in displaying ::after content for input elements. Despite using both single and double colons, removing pseudo-classes, and experimenting with different browsers, the content remains invisible.

While ::after pseudo-elements function seamlessly on elements such as div, span, p, and q, this is not the case for input elements. This behavior stems from a fundamental attribute of these elements: they lack document tree content.

The Role of Element Content

According to the CSS spec (http://www.w3.org/TR/CSS21/generate.html), ::after pseudo-elements explicitly require elements with a document tree content in order to render their content. Input elements, similar to img and br, contain no such content. Therefore, by design, browsers will not display ::after content for input fields.

The above is the detailed content of Why Won\'t ::after Content Display for Input Elements in HTML5?. For more information, please follow other related articles on the PHP Chinese website!