title: To What Self-Closing Elements Can ::before and ::after Pseudo-Elements be Applied
body: <p>I'm particularly interested in understanding when the <code>::before</code> and <code>::after</code> pseudo-elements can be applied to self-closing tags. This is the definition of these pseudo-elements, according to the <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/generate.html#before-after-content" rel="noreferrer">W3 Generated Content CSS Specifications</a>:</p>
  
  <blockquote>
    <p><strong>12.1 The :before and :after pseudo-elements</strong>: 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.</p>
  </blockquote>
  
  <p>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 <code>br</code> tag) should not support the <code>::before</code> and <code>::after</code> pseudo-elements.</p>
  
  <p>Extrapolating on this, and based on my understanding of the definition of an element's "content", I would think that <em>none</em> of the self-closing tags would support the <code>::before</code> and <code>::after</code> pseudo-elements. In practice, however, I've found that many self-closing tags have full support.</p>
  
  <p>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.</p>
  
  <p>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 <code>::before</code> and <code>::after</code>, and I've embedded that test in a snippet below. I am getting radically different results across browsers and can find very little consistency.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.test {
    display: inline;
    visibility: hidden;
  }
  
  span + *::after {
    visibility: visible;
    color: green;
    content: 'YES';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h3&gt;Which Self-Closing Tags Support Pseudo Elements?&lt;/h3&gt;
  &lt;div&gt;&lt;span&gt;Text Input:&lt;/span&gt; &lt;input type="text" class="test"&gt;&lt;/div&gt;
  &lt;div&gt;&lt;span&gt;Checkbox Input:&lt;/span&gt; &lt;input type="checkbox" class="test"&gt;&lt;/div&gt;
  &lt;div&gt;&lt;span&gt;Radio Input:&lt;/span&gt; &lt;input type="radio" class="test"&gt;&lt;/div&gt;
  &lt;div&gt;&lt;span&gt;Submit Input:&lt;/span&gt; &lt;input type="submit" class="test"&gt;&lt;/div&gt;
  &lt;div&gt;&lt;span&gt;Reset Input:&lt;/span&gt; &lt;input type="reset" class="test"&gt;&lt;/div&gt;
  &lt;div&gt;&lt;span&gt;Button Input:&lt;/span&gt; &lt;input type="button" class="test"&gt;&lt;/div&gt;
  &lt;div&gt;&lt;span&gt;Image:&lt;/span&gt; &lt;img class="test"&gt;&lt;/div&gt;
  &lt;div&gt;&lt;span&gt;Line Break:&lt;/span&gt; &lt;br class="test"&gt;&lt;/div&gt;
  &lt;div&gt;&lt;span&gt;Horizontal Rule:&lt;/span&gt; &lt;hr class="test"&gt;&lt;/div&gt;
  &lt;div&gt;&lt;span&gt;Link:&lt;/span&gt; &lt;link class="test"&gt;&lt;/div&gt;
  &lt;div&gt;&lt;span&gt;Meta:&lt;/span&gt; &lt;meta class="test"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is my interpretation of the <code>::before</code> and <code>::after</code> 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.</p>
  
  <hr>
  
  <p>Edit: Regarding "Replaced Elements"</p>
  
  <p>I noticed a line at the bottom of the Generated Content Specs that said:</p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>This might have something to do with the answer. According to <a href="http://www.w3.org/TR/CSS21/conform.html" rel="noreferrer">this spec</a>, a "replaced element" is defined as:</p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>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.</p>