Javascript CSS depois

| | | | | | | | | | | | | | | | | | | | | | | | | | | | |

O CSS:: antes do conteúdo da seleção é inserido antes de um elemento selecionado. CSS: após o conteúdo das inserções após um elemento especificado. Esses seletores são comumente usados para adicionar texto antes ou depois de um parágrafo ou link.

Ao criar um site, você pode adicionar conteúdo antes ou depois do conteúdo de uma página. elemento. Por exemplo, você pode adicionar uma imagem antes de cada marcador em uma lista.

É aqui que entram:: antes e depois:: elementos pseudo-CSS. Esses pseudoelementos permitem inserir conteúdo antes ou após o conteúdo de um elemento.

Este tutorial irá discutir, referindo-se a exemplos, como usar os pseudo-elementos:: antes e depois:: para decorar o conteúdo de uma página web. Quando terminar de ler este tutorial, você será um especialista em usar:: antes e depois:: pseudo-elementos em CSS.

Pseudo-elementos CSS

Um pseudo-elementos element é uma palavra-chave especial que permite estilizar uma parte específica dos elementos selecionados por um seletor CSS. Neste artigo, chamaremos pseudoelementos como seletores porque cada pseudoelemento é um seletor

Os pseudoelementos são úteis quando você deseja estilizar um elemento sem adicionar CSS ou ID de classes para o elemento. Por exemplo, se você deseja adicionar uma seta ">" após cada link em uma página da Web, você pode usar um pseudoelemento.

CSS oferece uma ampla variedade de pseudoelementos. Em particular:: primeira linha,:: primeira letra,:: antes e depois::. Para os propósitos deste tutorial, vamos nos concentrar nos dois últimos::::: antes e depois.

Os pseudo-elementos são normalmente representados por dois-pontos (::). Embora CSS3 suporte o uso de sintaxe de ponto único (:) para declarar um pseudo-elemento, usar a notação de dois pontos é a melhor prática

Isso ocorre porque o A notação dois pontos é usada para distinguir os espaços reservados da pseudo-classe.

CSS:: antes do elemento pseudo-elemento

It:: antes do pseudo- l "adiciona conteúdo que aparece antes de um elemento no uma página web Muitas vezes este elemento é usado para anexar algum texto antes de um parágrafo

a sintaxe de:: antes do pseudo-elemento é: ..

O:: before selector é adicionado depois. o nome do elemento ao qual você deseja aplicar o seletor

Aqui estão os principais componentes da frente:: pseudo-elemento:

Se você estiver interessado em aprender mais sobre como os seletores funcionam em CSS, leia nosso guia Seletores CSS .

Vamos dar um exemplo para demonstrar como o:: antes do pseudo-elemento funciona.

Suponha que queremos adicionar um link de emoji (Ôîó) antes de cada link em uma página da Web de exemplo. Podemos fazer isso usando o seguinte código:

Nosso código retorna:

Capture d` screen de 2020 12 09 08 00 16

Fizemos isso especificando uma propriedade de conteúdo em nosso arquivo CSS, que se parece com isto:

content: "Ôîó";

Nossa regra adicionou um link de emoji no início da nossa tag que criamos

o valor do atributo "content" pode ser:.

Você não pode inserir um elemento HTML no atributo content.

o CSS:: após o pseudo-elemento

o CSS:: após o pseudo-elemento permite adicionar conteúdo imediatamente após um elemento em uma página da Web. Assim como o:: antes do seletor, depois:: é frequentemente usado com links ou parágrafos de texto.

Th A sintaxe de p seudo-element:: é depois do seguinte:

the: : after é a mesma sintaxe para o:: before pseudo-element.:: aceita após os mesmos valores ‚Äã‚Äãpara o atributo "content" que discutimos anteriormente

:: after CSS Example

Suponha que você esteja projetando um elemento de link em um site para uma padaria chamada Hansons Bakery. Este link deve exibir o texto "Ir para a página Home Hansons Bakery." Nosso link deve ser cercado por uma borda preta sólida de 1 pixel de largura.

Após nosso rótulo, queremos um texto caixa para aparecer com o conteúdo Esta página nosso menu de produtos de panificação. (Observe o espaço em branco antes da palavra "This".) Nossa caixa deve ter uma cor de fundo HTML laranja.

Podemos fazer isso usando o seguinte código:

Nosso código gerou conteúdo semelhante a este:

< class figure = "wp-bloc-image"> Captura de 2020 12 09 08 00 47 1