O pseudo-elemento CSS é utilizado para estilizar a parte de um elemento específico. Por exemplo, ele pode ser usado para inserir conteúdo antes ou depois do elemento ou estilo da primeira linha ou letra do elemento. Para fazer isso, os elementos antes e depois.

Este blog o instruirá sobre CSS “antes" e "depois”Seletores. Mas antes disso, discutiremos a sintaxe dos elementos pseudo-elegantes.

Como usar o “Pseudo-Elemento” no CSS?

A sintaxe do elemento pseudo-elemento é mencionada abaixo:

Selector :: Pseudo-Element
Propriedades do CSS…

Aqui:

• ““Seletor ”: Os elementos HTML que queremos estilizar no CSS são escolhidos usando os seletores CSS. Esses seletores podem ser seletores de identificação, seletores de elementos, seletores de classe ou mais.
• ““Pseudo-elemento”: Pseudo-elemento é utilizado para estilizar a parte de um elemento específico. Pode ser antes, depois, primeira linha, primeira letra ou mais.
• ““Propriedades do CSS”: Essas propriedades podem ser utilizadas para estilizar o conteúdo adicional.

Exemplo

O primeiro passo é criar uma nova div com a classe “principal”. Dentro deste elemento div, inclua

e

Elementos para adicionar algum conteúdo à página da web:

Olá Mundo!

Linuxhint é o melhor site de tutorial.

Junte-se a nossa comunidade

Escrevemos artigos e fazemos vídeos para educar o mundo online.

Estilo antes do elemento “H2”

h2 :: antes
Conteúdo: "->";
cor verde;

O "H2 :: antes”Refere -se a adicionar estilo antes do elemento H2 com as seguintes propriedades:

• ““contente”Propriedade especifica o conteúdo que é inserido no elemento.
• ““cor”A propriedade é utilizada para definir a cor do texto do elemento.

Elemento de estilo “P”

.principal p
Size da fonte: 20px;

O ".principal p”Refere -se ao elemento P da div principal. Seu tamanho de fonte é definido como 20px utilizando o “tamanho da fonte" propriedade.

Aqui está o resultado do código acima:

Como podemos ver, todo elemento H1 no arquivo HTML é especificado com o símbolo antes dele.

Aqui está a lista de conteúdo que pode ser especificado na propriedade de conteúdo:

• ““Uma quebra de linha”: Para inserir uma quebra de linha, use“\A" personagem
• ““Nada”: É especificado como vírgulas invertidas vazias e é útil ao inserir imagens de fundo.
• ““Uma imagem”: Para inserir uma imagem na propriedade de conteúdo, especificamos o“ URL ”da imagem.
• ““Uma linha”: Caracteres especiais devem ser codificados como uma entidade Unicode.

Como adicionar o elemento GIF “antes”?

Também podemos adicionar GIFs ou imagens antes ou depois dos elementos. Veja o exemplo abaixo.

Estilo antes do elemento “H1”

H1 :: antes
Imagem de fundo: URL (/gifs/sorriso.gif);
Antecedentes-tamanho: 50px;
Repetição de fundo: sem repetição;
Exibição: bloco embutido;
Largura: 50px;
Altura: 50px;
contente: "";

O "H1 :: antes”Refere -se ao estilo de inserção antes do elemento H1. As seguintes propriedades são aplicadas ao objeto inserido antes do elemento H1:

• ““imagem de fundo”Propriedade especifica o URL do GIF.
• ““tamanho de fundo”A propriedade é utilizada para especificar o tamanho do fundo. S
• ““fundo de repetição”Propriedade define como as imagens são repetidas.
• ““mostrar”Propriedade com o valor“Block inline”Permissões para especificar a altura e a largura do elemento.
• ““largura”Propriedade define a largura do elemento HTML.
• ““altura”Propriedade define a altura do elemento HTML.
• ““contente”A propriedade é utilizada para inserir o conteúdo gerado em conjunto com os pseudo-seletores.

Div "Main" de estilo

.principal
Background-Color: RGB (245, 245, 44);
preenchimento: 5px;

O ".principal”A classe do elemento div é estilizada com as propriedades listadas:

• ““cor de fundo”A propriedade é utilizada para especificar a cor de fundo do elemento.
• ““preenchimento”A propriedade é usada para definir o espaço no conteúdo do T ou dentro da borda.

Pode -se observar que o GIF é colocado antes de cada elemento H1:

Como inserir símbolos "depois" elementos específicos?

O pseudo-seletor “::depois”É utilizado para inserir conteúdo após o elemento. O exemplo abaixo demonstra o pseudo-seletor após.

Exemplo

Crie um novo elemento div com o “principal" aula. Dentro deste elemento, adicione

e

Elementos para adicionar algum conteúdo à página da web:

Html

Linguagem de marcação de hipertexto

CSS

Planilha em estilo cascata

Estilo depois do elemento “H2”

H2 :: depois
contente: "*";
cor vermelha;
tamanho da fonte: 30px;

O "H2 :: depois”Refere -se ao depois do elemento H2. Abaixo estão as propriedades que são aplicadas a ele:

• ““contente”Propriedade especifica o conteúdo que é inserido no elemento.
• ““cor”A propriedade é utilizada para definir a cor da fonte.
• ““tamanho da fonte”A propriedade é utilizada para a configuração do tamanho da fonte do elemento.

Elemento de estilo “P”

.conteúdo principal p
Size da fonte: 20px;

O tamanho da fonte do elemento P da div, principal de conteúdo é especificado usando o “tamanho da fonte" propriedade.

A saída do snippet de código acima é mostrada abaixo:

Aprendemos com sucesso sobre o CSS antes e depois dos seletores no CSS.

Conclusão

No CSS, os pseudo-elementos são utilizados para especificar algumas propriedades de estilo para a parte de um elemento. Por exemplo, o “::antes" e "::depois”Os elementos especificados são utilizados para adicionar o estilo antes e depois do elemento desejado, respectivamente. Este blog demonstrou o uso do CSS antes e depois dos seletores.