Estou particularmente interessado em entender quando o::before e::after pseudoelementos podem ser aplicados a tags de fechamento automático. Essa é a definição desses pseudoelementos, de acordo com oEspecificações de CSS de conteúdo gerado W3:

12.1 Os pseudoelementos: before e: after: Os autores especificam o estilo e o local do conteúdo gerado com os pseudoelementos: before e: after. Como seus nomes indicam, os pseudoelementos: before e: after especificam o local do conteúdo antes e depois do conteúdo da árvore de documentos de um elemento. A propriedade 'content', em conjunto com esses pseudoelementos, especifica o que é inserido.

Com base nisso, parece que esses pseudoelementos se destinam a modificar o conteúdo de um elemento. Pelo que entendi (embora não consiga encontrar uma fonte autorizada para apoiar isso), "conteúdo" é definido mais ou menos como "o material entre as tags de abertura e fechamento"; portanto, acho que elementos que não possuem "conteúdo" (como um HTMLbr tag) não deve suportar o::before e::after pseudo-elementos.

Extrapolando isso, e com base no meu entendimento da definição do "conteúdo" de um elemento, eu pensaria queNenhum das tags de fechamento automático suportariam o::before e::after pseudo-elementos. Na prática, no entanto, descobri que muitas tags de fechamento automático têm suporte total.

Além da questão do que é definido como "conteúdo", também podemos considerar o fato de que os pseudoelementos são representados como (embora tecnicamente não sejam) filhos DOM do elemento ao qual são aplicados. O fato de as tags de fechamento automático não poderem ter filhos DOM parece apoiar a idéia de que as tags de fechamento automático não devem ter pseudo-elementos.

Na minha tentativa de encontrar a resposta para essa pergunta, montei um pequeno teste para determinar quais tags de fechamento automático (eu peguei algumas delas quando elas vieram à mente)::before e::after, e eu integrei esse teste em um trecho abaixo. Estou obtendo resultados radicalmente diferentes nos navegadores e posso encontrar muito pouca consistência.

.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>

A minha interpretação do::before e::after especificação incorreta? Minha definição de "conteúdo" de um elemento está incorreta? Estou procurando respostas com respostas autorizadas que explicam o que o "navegador perfeito" faria se implementasse esses pseudo-elementos em conjunto com tags HTML de fechamento automático exatamente de acordo com as especificações CSS do W3.

Edit: Sobre "Elementos Substituídos"

Percebi uma linha na parte inferior das Especificações de conteúdo gerado que dizia:

Nota. Esta especificação não define completamente a interação de: before e: after com elementos substituídos (como IMG em HTML). Isso será definido em mais detalhes em uma especificação futura.

Isso pode ter algo a ver com a resposta. De acordo comesta especificação, um "elemento substituído" é definido como:

Um elemento cujo conteúdo está fora do escopo do modelo de formatação CSS, como uma imagem, documento incorporado ou applet. Por exemplo, o conteúdo do elemento IMG HTML é frequentemente substituído pela imagem que seu atributo "src" designa. Os elementos substituídos geralmente têm dimensões intrínsecas: uma largura intrínseca, uma altura intrínseca e uma razão intrínseca.

Não consigo encontrar uma lista autorizada de elementos substituídos na especificação HTML, mas pude facilmente ver a maioria (ou todas) as tags de fechamento automático como se encaixam nessa definição. Também não tenho certeza se a "especificação futura" mencionada na primeira nota já foi concluída.