To What Self-Closing Elements Can ::before and ::after Pseudo-Elements be Applied

问题

I'm particularly interested in understanding when the ::before and ::after pseudo-elements can be applied to self-closing tags. This is the definition of these pseudo-elements, according to the W3 Generated Content CSS Specifications:

12.1 The :before and :after pseudo-elements: Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.

Based on this, it seems that these pseudo-elements are intended to modify the content of an element. As I understand it (although I can't find an authoritative source to support this), "content" is defined more or less as "the stuff between the opening and closing tags"; therefore, I would think that elements which have no "content" (such as an HTML br tag) should not support the ::before and ::after pseudo-elements.

Extrapolating on this, and based on my understanding of the definition of an element's "content", I would think that none of the self-closing tags would support the ::before and ::after pseudo-elements. In practice, however, I've found that many self-closing tags have full support.

Aside from the question of what is defined as "content", we can also consider the fact that pseudo-elements are represented as (although technically they aren't) DOM children of the element to which they are applied. The fact that self-closing tags cannot have DOM children seems to support the idea that self-closing tags oughtn't have pseudo-elements.

In my attempt to find the answer to this question, I put together a small test to determine which self-closing tags (I picked a handful of them as they came to mind) support ::before and ::after, and I've embedded that test in a snippet below. I am getting radically different results across browsers and can find very little consistency.

.test {
  display: inline;
  visibility: hidden;
}

span + *::after {
  visibility: visible;
  color: green;
  content: 'YES';
}

<h3>Which Self-Closing Tags Support Pseudo Elements?</h3>
<div><span>Text Input:</span> <input type="text" class="test"></div>
<div><span>Checkbox Input:</span> <input type="checkbox" class="test"></div>
<div><span>Radio Input:</span> <input type="radio" class="test"></div>
<div><span>Submit Input:</span> <input type="submit" class="test"></div>
<div><span>Reset Input:</span> <input type="reset" class="test"></div>
<div><span>Button Input:</span> <input type="button" class="test"></div>
<div><span>Image:</span> <img class="test"></div>
<div><span>Line Break:</span> <br class="test"></div>
<div><span>Horizontal Rule:</span> <hr class="test"></div>
<div><span>Link:</span> <link class="test"></div>
<div><span>Meta:</span> <meta class="test"></div>

Is my interpretation of the ::before and ::after specification incorrect? Is my definition of an element's "content" incorrect? I am looking for answers with authoritative answers which explain what the "perfect browser" would do if it were to implement these pseudo-elements in conjunction with self-closing HTML tags exactly according to W3 CSS specifications.

Edit: Regarding "Replaced Elements"

I noticed a line at the bottom of the Generated Content Specs that said:

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

This might have something to do with the answer. According to this spec, a "replaced element" is defined as:

An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For example, the content of the HTML IMG element is often replaced by the image that its "src" attribute designates. Replaced elements often have intrinsic dimensions: an intrinsic width, an intrinsic height, and an intrinsic ratio.

I can't find an authoritative list of replaced elements in the HTML spec, but I could easily see most (or all) self-closing tags as fitting that definition. I'm also not sure if the "future specification" alluded to in the first note was ever completed.

回答1:

According to the CSS 2.1 spec,

This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

But the current draft of Selectors Level 3 only says

The ::before and ::after pseudo-elements can be used to describe generated content before or after an element's content. They are explained in CSS 2.1

CSS 2.1 defines replaced elements like this:

An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet.

The content of replaced elements is not considered in the CSS rendering model.

According to MDN,

Typical replaced elements are <img>, <object>, <video> or forms element like <textarea>, <input>. Some elements, like <audio> or <canvas> are replaced elements only in specific cases.

Therefore, using :before or :after with replaced elements will produce unreliable results.

来源：https://stackoverflow.com/questions/26633229/to-what-self-closing-elements-can-before-and-after-pseudo-elements-be-applie

标签

html

css

css3

w3c

pseudo-element