Pseudo-elementos parte 3: perguntas frequentes

Olá! Interessado no assunto de pseudo-elementos? Esse é o terceiro artigo sobre o assunto, e nele eu já não explico muito o que são pseudo-elementos, e na realidade respondo algumas perguntas que vejo frequentemente sobre o assunto na web. Antes de ler esse artigo, recomendo ler minha introdução ao assunto Pseudo-elementos parte 1: o que são? e a sua sequência Pseudo-elementos parte 2: quando usar?

Tive algum feedback com meus dois artigos sobre pseudo-elementos e, com alguma pesquisa, fiz um apanhado de perguntas que vejo frequentemente em no stackoverflow, no fórum da Alura e no GUJ. E então, vamos lá?

Preciso colocar um content no meu pseudo-elemento?

Sim e não. Pseudo-elementos precisam sim que você informe o content, mas ele pode vir vazio. Use content:”; e pronto. Só não se esqueça de informar o display como block e a altura e largura.

Pseudo-elementos funcionam em todos os browsers?

Sim! Pseudo-elementos tem suporte em todos os navegadores. Em caso de dúvida se determinado atributo funciona em todos ou alguns navegadores, recomendo usar o site caniuse.com.

Meu :before/:after não está aparecendo!

Pseudo elementos :before e :after são, por padrão, inline em seu display. Por isso, se você não inserir um content, ele não vai aparecer. Caso você queira que esse pseudo-elemento tenha uma imagem de background, informe que o display deve ser block, sua altura e largura. E não se esqueça de enfiar o content vazio.

Como seleciono um pseudo-elemento no JavaScript?

Esse é um dos casos que não recomendo que você use pseudo-elemento. Se você precisa usar aquele elemento no JavaScript, e não o pai dele, ele é um elemento real e não deve ser usado como pseudo-elemento.

Existem sim maneiras de selecionar o pseudo-elemento, mas é muito trabalhoso. É muito mais fácil seguir a lógica dele ser um elemento individual.

Como alinho meu elemento e meu pseudo-elemento verticalmente?

As vezes precisamos que o elemento e o pseudo-elemento fiquem alinhados verticalmente. Por exemplo, um ícone de login na frente do texto “login”. Se o ícone não for exatamente do tamanho do texto, ele vai ficar desalinhado.

O que eu costumo fazer para solucionar esse problema é usar flex-box. Deixo o elemento do texto dentro de uma div com flex box e faço esse pai ter alinhamento vertical. Fica mais ou menos assim:

.elemento {
  color:red;
  display:flex;
  align-items:center;
  
}
.elemento::before {
  content:'';
  background:url('images/image.png');
  display: block;
  height:30px;
  width:30px;
}
<div class="elemento">login</div>

E aí? Respondi sua pergunta? Não? Então comenta ela aí que vou fazer meu melhor pra respondê-la.