É possível definir a ordem de empilhamento de pseudo-elementos abaixo de seu elemento pai?

Eu estou tentando estilizar um elemento com o seletor de CSS :after pseudo element

 #element { position: relative; z-index: 1; } #element::after { position:relative; z-index: 0; content: " "; position: absolute; width: 100px; height: 100px; } 

Parece que o elemento ::after não pode ser menor que o próprio elemento.

Existe uma maneira de ter o pseudo elemento menor que o elemento em si?

Pseudo-elementos são tratados como descendentes de seu elemento associado. Para posicionar um pseudoelemento abaixo de seu pai, você deve criar um novo contexto de empilhamento para alterar a ordem de empilhamento padrão.
Posicionar o pseudoelemento (absoluto) e atribuir um valor de índice z diferente de “auto” cria o novo contexto de empilhamento.

 #element { position: relative; /* optional */ width: 100px; height: 100px; background-color: blue; } #element::after { content: ""; width: 150px; height: 150px; background-color: red; /* create a new stacking context */ position: absolute; z-index: -1; /* to be below the parent element */ } 
     Position a pseudo-element below its parent   

Eu sei que este é um tópico antigo, mas sinto a necessidade de postar a resposta correta. A resposta real para essa pergunta é que você precisa criar um novo contexto de empilhamento no pai do elemento com o pseudoelemento (e você realmente precisa fornecer um índice z, não apenas uma posição).

Como isso:

 #parent { position: relative; z-index: 1; } #pseudo-parent { position: absolute; /* no z-index allowed */ } #pseudo-parent:after { position: absolute; top:0; z-index: -1; } 

Não tem nada a ver com o uso: before ou: after pseudo elements.

 #parent { position: relative; z-index: 1; } #pseudo-parent { position: absolute; } /* no z-index required */ #pseudo-parent:after { position: absolute; z-index: -1; } /* Example styling to illustrate */ #pseudo-parent { background: #d1d1d1; } #pseudo-parent:after { margin-left: -3px; content: "M" } 
 
 

Há duas questões em jogo aqui:

  1. A especificação CSS 2.1 afirma que “Os elementos: pseudo-elementos before: e: after interagem com outras checkboxs, como checkboxs de input, como se fossem elementos reais inseridos apenas dentro de seu elemento associado.” Dada a maneira como os z-indexes são implementados na maioria dos navegadores, é muito difícil (leia, não sei de uma maneira) mover o conteúdo abaixo do z-index do seu elemento pai no DOM que funciona em todos os navegadores.

  2. O número 1 acima não significa necessariamente que seja impossível, mas o segundo impedimento é realmente pior: em última análise, é uma questão de suporte ao navegador. O Firefox não suportou o posicionamento do conteúdo gerado até FF3.6. Quem sabe sobre navegadores como o IE. Portanto, mesmo que você consiga encontrar um hack para funcionar em um navegador, é muito provável que funcione apenas nesse navegador.

A única coisa que posso pensar que vai funcionar nos navegadores é usar o javascript para inserir o elemento em vez de CSS. Eu sei que não é uma ótima solução, mas os pseudo-seletores: antes e depois: só não parecem que vão cortar aqui.

Falando em relação à especificação ( http://www.w3.org/TR/CSS2/zindex.html ), uma vez que um.someSeletor está posicionado, cria um novo contexto de empilhamento que seus filhos não podem separar. Deixe um.someSelector não posicionado e, em seguida, filho a.someSeletor: depois pode ser posicionado no mesmo contexto que a.someSeletor.

Eu sei que esta pergunta é antiga e tem uma resposta aceita, mas encontrei uma solução melhor para o problema. Estou postando aqui para não criar uma pergunta duplicada e a solução ainda está disponível para outras pessoas.

Mude a ordem dos elementos. Use o :before pseudo-element para o conteúdo que deve estar abaixo e ajuste as margens para compensar. A limpeza da margem pode ser confusa, mas o z-index desejado será preservado.

Eu testei isso com o IE8 e FF3.6 com sucesso.

Defina o z-index do elemento :before ou :after pseudo-elemento como -1 e atribua a ele uma position que respeite a propriedade z-index ( absolute , relative ou fixed ). Isso funciona porque o z-index do pseudo elemento é relativo ao elemento pai, em vez de , que é o padrão para outros elementos. O que faz sentido porque são elementos filhos de .

O problema que eu estava tendo (que me levou a esta pergunta e a resposta aceita acima) foi que eu estava tentando usar um :after pseudo elemento para obter fantasia com um fundo para um elemento com z-index de 15, e mesmo quando definido com um z-index de 14, ele ainda estava sendo renderizado em cima de seu pai. Isso ocorre porque, nesse contexto de empilhamento, o pai tem um z-index de 0.

Espero que ajude a esclarecer um pouco o que está acontecendo.

Experimente

 el { transform-style: preserve-3d; } el:after { transform: translateZ(-1px); }