Este artigo irá guiá-lo sobre como alterar o conteúdo em CSS.
Como alterar o conteúdo em CSS?
Para alterar o conteúdo em CSS, usaremos os métodos abaixo:
Vamos passar por cada método um por um!
Método 1: Use ::after Selector com a propriedade content para alterar o conteúdo em CSS
O ' ::depois ” seletor coloca o conteúdo especificado após o elemento HTML usando o CSS “ contente ' propriedade. Esta operação ajuda a adicionar o conteúdo ao elemento selecionado. Além disso, o “ exibição ” pode ser utilizada para ocultar o conteúdo existente.
Vamos dar uma olhada no exemplo abaixo para entender como alterar o conteúdo em CSS usando o seletor ::after.
Exemplo
Aqui está nossa página HTML com o texto “ Bom Dia!!! ”. Vamos substituir o conteúdo adicionado:
Atualmente, adicionamos um “ “ tag com texto na seção do corpo do nosso arquivo HTML:
< p > Bom Dia!!! < / p >Em nosso arquivo CSS, agora usaremos o seletor ::after como “ corpo::depois ” e use o “ contente ” imóvel com o valor “ Boa noite ” dentro de sua definição. Como resultado, o seletor CSS colocará o texto logo após o texto escrito. Por fim, oculte o texto existente usando o “ exibição ” e defina seu valor como “ Nenhum ”:
< estilo >corpo::depois {
contente : 'Boa noite' ;
}
p {
Mostrar nenhum;
}
< / estilo >
Agora, salve seu arquivo HTML e simplesmente abra-o no navegador ou use “Servidor ao vivo ” para o mesmo fim:
Como você pode ver, o conteúdo foi alterado com sucesso usando o seletor CSS ::after:
Método 2: Use ::before Selector com a propriedade content para alterar o conteúdo em CSS
Em CSS, o “ ::antes da ” é utilizado para fazer com que o conteúdo apareça logo antes do conteúdo existente de um elemento. Pode ser usado em combinação com o “ contente ” para adicionar novo conteúdo ao elemento selecionado.
Exemplo
Especifique o seletor ::before logo após o corpo como “ corpo::antes ”. Isso colocará o novo conteúdo antes do conteúdo existente. Observe que todas as outras propriedades permanecem as mesmas do exemplo anterior:
< estilo >corpo::antes {
contente : 'Boa noite' ;
}
p {
Mostrar nenhum;
}
< / estilo >
Resultado
Explicamos diferentes métodos para alterar o conteúdo em CSS.
Conclusão
Para alterar o conteúdo, “ ::depois ' e ' ::antes da ” Seletores CSS são usados com o “ contente ' propriedade. Na primeira abordagem, o texto especificado é adicionado após o elemento selecionado, enquanto o segundo seletor CSS funciona ao contrário. Além disso, o “ exibição ” pode ser utilizada para ocultar o conteúdo existente de um elemento. É assim que o conteúdo é alterado completamente em CSS. Cobrimos os dois métodos de alterar o conteúdo em CSS.