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.
<br>tag does have content, it essentially contains an implicit newline. It may be useful to add content after each break, like a carriage return icon or something. A lot of the self-closing tags do have use cases for:beforeand:after.+1though, good question. – Carl Smith::beforeon, say, a text field input, which has at least as much "content" as abrtag? do you know where i can find a formal definition of an element's "content"? – Woodrow Barlow<br>tags aught to work, which puts the reader on a tangent. I wantbr:afterto work. It's otherwise a good question I don't know the answer to. – Carl Smith::beforeand::afterto certain self-closing tags. i use it to make custom-style checkboxes all the time. but i'd like to know what the correct way of doing it is. so that i won't be surprised if browsers suddenly decide to "fix" this behavior later. – Woodrow Barlow