Como posso inspecionar e ajustar: antes e: depois dos pseudo-elementos no navegador?

Eu criei alguns elementos DOM bastante elaborados com um pseudo-elemento: after, e gostaria de poder inspecioná-los e ajustá-los no Chrome Inspector ou Firebug ou equivalente.

Apesar desse recurso ser mencionado nesta postagem do blog WebKit / Safari (datado de 2010), não consigo encontrar esse recurso no Chrome ou no Safari. O Chrome tem pelo menos caixas de seleção para inspecionar: hover,: visitado e: estados ativos, mas: antes e: depois estão longe de serem vistos.

Além disso, esta postagem do blog (datada de 2009!) Menciona que esse recurso existe nas ferramentas de desenvolvimento do IE, mas atualmente estou usando o Mac OS, então isso não ajuda em nada. Além disso, o IE não é um navegador que tenho como alvo principal.

Existe alguma maneira de inspecionar esses pseudoelementos?

EDIT: Além de estar errado sobre o Firebug ser incapaz de inspecionar esses elementos, descobri que o Opera é muito bom em Inspecionar: antes e: depois dos elementos fora da caixa.

Nas ferramentas Dev do Chrome , os estilos de um pseudoelemento são visíveis no painel:

Caso contrário, você também pode inserir a seguinte linha no console JavaScript e inspecionar o CSSStyleDeclarationobjeto retornado :

getComputedStyle(document.querySelector('html > body'), ':before');

• window.getComputedStyle
• document.querySelector

A partir do Chrome 31, os pseudoelementos são exibidos no painel de elementos como elementos filhos de seus pais, conforme mostrado na imagem a seguir:

Você pode selecioná-los como faria com um elemento normal, mas se remover o contentestilo, o pseudo elemento também será removido e o foco do devtools mudará para seu pai.

Parece que os estilos CSS herdados não são visíveis e você não pode editar o conteúdo CSS do painel de elementos.

O Chrome não mostrará: antes e: depois dos pseudo-elementos na árvore DOM, se eles perderem o atributo "conteúdo". Deve ser definido, mesmo se estiver definido como nada.

Isso não aparecerá:

:after {
  background-color: red;
}

Isso aparecerá no inspetor:

:after {
  content: "";   
  background-color: red;    
}

Espero que ajude.

Depois de muita frustração, eu descobri que o Firefox não mostra os pseudo elementos na árvore do documento em tudo , mas se você selecionar a exata elemento que tem elemento pseudo (s) definido, então os estilos para o seu elemento pseudo (s ) são mostrados na seção de regras de estilo no lado direito. Isso é verdadeiro tanto para o firebug quanto para a inspeção interna ("Q"), e estou chocado que ninguém se preocupou em explicar isso claramente antes.

Claramente, o tratamento de cromo / cromo de pseudoelementos é muito superior, pois eles podem ser selecionados (tanto na árvore do documento como diretamente na página) e inspecionados como elementos regulares, com layout, propriedades e tudo mais, independente de seu "proprietário "

Versões de navegador que estou usando atualmente: Chromium 40.0.2214.91, Firefox 31.3.0.

O Firefox já tem esse recurso há algum tempo, basta clicar com o botão direito, "inspecionar elemento" e ver os elementos antes e depois no painel direito do inspetor.

Selecione o elemento -> selecione o foco marcado ---> você pode ver :: antes e depois dos elementos

Pelo menos desde o Chrome 62, há uma configuração no DevTools para 'Mostrar DOM de sombra do agente do usuário' que exibe pseudo-elementos adicionais como marcadores de posição de entrada , que não apareceriam na árvore DOM de outra forma.

Mais informações: https://stackoverflow.com/a/26853319/3963594