11/11/2017 Development / css

Eu estava estudando os pseudos-elementos e me surgiu uma dúvida, existe alguma restrição em usá-los em alguns elementos?

A resposta é: SIM! Nos chamados replaced elements

No CSS, um replaced elements é um elemento cuja representação está fora do escopo do CSS. Em outras palavras, estes são objetos externos cuja representação é independente do modelo de formatação CSS, ou seja, não adiantar fazer css pra esses elementos, o CSS vai cagar pra você hehe.
Alguns elemento

  • video
  • iframe
  • img
  • embed

Elementos em casos específicos:

  • canvas
  • audio
  • object
  • applet

Alguns controles de formulário também podem ser elementos substituídos. A especificação HTML diz que um elemento pode ser substituído e os elementos do tipo de imagem devem ser sempre substituídos. Os objetos inseridos usando a propriedade de conteúdo CSS são elementos substituídos anônimos. Eles são "anônimos" porque eles não existem na marcação HTML

Então pra finalizar:

Replaced elements do not have ::before and ::after pseudo-elements

No caso de alterar um input, é comum as pessoas alterarem o label. Veja esse exemplo:

http://jsbin.com/roxem/2/edit?html,css,js,output

Espero que sirva!