Entendendo o pseudoelemento antes e depois

A Folha de Estilo em Cascata (CSS) destina-se principalmente à aplicação de estilos à marcação HTML. No entanto, em alguns casos, adicionar marcações extra ao documento é redundante ou não é possível, há um recurso CSS que nos permite adicionar marcação extra sem interromper o documento real, ou seja, o pseudo-elementos.

Você já ouviu falar deste termo, especialmente quando você está seguindo alguns de nossos tutoriais.

Na verdade, existem alguns membros da família CSS que são classificados como pseudo-elementos tais como o :primeira linha, :primeira carta, ::seleção, :antes e :depois de. Mas, para este artigo, vamos limitar nossa cobertura apenas aos :antes e :depois de, “pseudo-elementos” aqui se referirá especificamente a ambos. Vamos olhar para este assunto específico a partir do básico.

A sintaxe e suporte ao navegador

o pseudo-elementos tem sido em torno desde CSS1, mas o :antes e :depois de que estamos discutindo aqui foram liberados em CSS2.1. No começo, o pseudo-elementos use um ponto-e-vírgula para a sintaxe, então, conforme a web evoluiu, no CSS3 pseudo-elementos foram revisados para usar o duplo cólon - tornando-se ::antes E ::depois de - para distingui-lo com pseudo-classes (por exemplo. :flutuar, :ativo, e assim por diante).

No entanto, independentemente de você usar o formato de vírgula única ou de duplo-vírgula, os navegadores também o reconhecerão. E como o Internet Explorer 8 suporta apenas o formato de um único vírgula, é mais seguro usar o ponto e vírgula se você quiser uma compatibilidade de navegador mais ampla..

O que isso faz?

Em suma, o pseudo-elementos irá inserir um elemento extra antes ou depois de o elemento do conteúdo, então quando adicionamos os dois, eles são tecnicamente iguais, com a seguinte marcação.

:antes Este é o conteúdo principal. :depois de

Mas esses elementos não são realmente gerados no documento. Eles ainda são visíveis na superfície, mas você não os encontrará na origem do documento, então, na prática, eles são falsa elementos.

Usando pseudo-elementos

Usando pseudo-elementos é relativamente fácil; a seguinte sintaxe seletor: antes irá adicionar um elemento antes o seletor do conteúdo enquanto esta sintaxe seletor: depois vai adicionar depois, e para adicionar um conteúdo dentro deles, podemos usar o conteúdo propriedade.

Por exemplo, o snippet abaixo irá adicionar uma aspa antes e depois da bloco de citação.

 blockquote: antes de content: aberto-citação;  blockquote: depois de content: close-quote;

Pseudo-elementos de estilo

Apesar de ser um elemento falso, o pseudo-elementos realmente agir como um “real” elemento; nós podemos adicionar qualquer declaração de estilos sobre eles, como mudar a cor, adicionar plano de fundo, ajustar o tamanho da fonte, alinhar o texto dentro dele e assim por diante.

 blockquote: antes de content: aberto-citação; tamanho da fonte: 24pt; texto-alinhar: centro; Altura da linha: 42px; cor: #fff; plano de fundo: #ddd; flutuar: esquerda; posição: relativa; top: 30px;  blockquote: depois de content: close-quote; tamanho da fonte: 24pt; texto-alinhar: centro; Altura da linha: 42px; cor: #fff; plano de fundo: #ddd; flutuar: certo; posição: relativa; fundo: 40 px;

Especificando a dimensão

Os elementos gerados são, por padrão, um elemento de nível in-line, portanto, quando estamos prestes a especificar a altura e a largura, precisamos primeiro defini-lo como um elemento de bloco usando visor: bloco declaração.

 blockquote: antes de content: aberto-citação; tamanho da fonte: 24pt; texto-alinhar: centro; Altura da linha: 42px; cor: #fff; plano de fundo: #ddd; flutuar: esquerda; posição: relativa; top: 30px; raio de fronteira: 25 px; / ** define como elemento de bloco ** / display: block; altura: 25 px; largura: 25px;  blockquote: depois de content: close-quote; tamanho da fonte: 24pt; texto-alinhar: centro; Altura da linha: 42px; cor: #fff; plano de fundo: #ddd; flutuar: certo; posição: relativa; fundo: 40 px; raio de fronteira: 25 px; / ** define como elemento de bloco ** / display: block; altura: 25 px; largura: 25px;

Anexar imagem de fundo

Também podemos substituir o conteúdo por uma imagem em vez de apenas texto simples. Apesar de conteúdo propriedade fornece um url () string para inserir uma imagem, mas na maioria dos casos eu prefiro usar o fundo propriedade para mais controle sobre a imagem anexada.

 blockquote: antes de content: ""; tamanho da fonte: 24pt; texto-alinhar: centro; Altura da linha: 42px; cor: #fff; flutuar: esquerda; posição: relativa; top: 30px; raio de fronteira: 25 px; plano de fundo: url (images / quotationmark.png) -3px -3px #ddd; display: bloco; altura: 25 px; largura: 25px;  blockquote: depois de content: ""; tamanho da fonte: 24pt; texto-alinhar: centro; Altura da linha: 42px; cor: #fff; flutuar: certo; posição: relativa; fundo: 40 px; raio de fronteira: 25 px; plano de fundo: url (images / quotationmark.png) -1px -32px #ddd; display: bloco; altura: 25 px; largura: 25px;

No entanto, como você pode ver no snippet acima, ainda estamos declarando conteúdo propriedade e desta vez com uma string vazia. o conteúdo propriedade é um requerimento e deve sempre ser aplicado; caso contrário, o pseudo-elemento não funciona qualquer que seja.

Combinando com pseudo-classes

Embora sejam um tipo diferente de pseudo, podemos usar o pseudo-classes junto com pseudo-elementos juntos em uma regra CSS, por exemplo, se queremos transformar o aspas de fundo um pouco mais escuro quando passamos o mouse sobre o bloco de citação.

 blockquote: hover: depois, blockquote: hover: before background-color: # 555;

Adicionando o efeito de transição

E podemos até aplicar o transição propriedade sobre eles para criar um efeito de transição de cor graciosa.

 transição: todos os 350ms; -o-transição: todos os 350ms; -moz-transition: todos os 350ms; -webkit-transition: todos os 350ms;

Infelizmente, o efeito de transição parece funcionar apenas na última versão do Firefox. Esperemos que mais navegadores alcancem para permitir que a propriedade de transição seja aplicada em pseudo-elementos no futuro.

Demonstração
Fonte de download

Mais inspiração

Para inspirar você, selecionamos três exemplos bacanas que podem lhe dar ideias para o seu web design.

Sombras Fascinantes

Neste tutorial, Paul Underwood explicou como criar um efeito de sombra mais realista e fascinante usando :antes e :depois de pseudo-elementos. Ambos estão posicionados de forma absoluta e colocados bem atrás negativo z-index valor.

Efeito de imagem empilhada

Usando o pseudo-elementos Também é possível criar um efeito de imagem empilhada com uma única imagem na marcação. o pseudo-elementos é usado para criar uma ilusão das imagens empilhadas na parte traseira da imagem real usando negativo z-index.

Conclusão

Pseudo-elements e simples “legal” e, finalmente, utilizável, basicamente temos dois elementos de bônus para cada elemento que adicionamos sem interferir com a estrutura HTML real, e depois transformando-os em quase tudo que podemos imaginar.

Na verdade, há algumas melhorias para pseudo-elementos que está sendo trabalhado atualmente, como pseudo-elementos de aninhamento div :: before :: before content: "; e vários pseudo-elementos div :: before (3) content: "; o que obviamente abrirá muito mais possibilidades na prática de web design no futuro. Enquanto eles estão sendo implementados nos navegadores atuais, vamos esperar pacientemente por enquanto.