Como alterar o conteúdo no CSS

Como alterar o conteúdo no CSS
Nos aplicativos da Web, todo desenvolvedor se esforça para melhorar a aparência e a experiência geral do usuário de todos os aspectos. Às vezes, os desenvolvedores querem fazer as coisas de maneira diferente e melhor do que outros. Por exemplo, mostrando um texto sobre algo e depois transformá -lo em outra coisa de acordo com as atualizações. Tudo isso pode ser feito com a ajuda de diferentes propriedades e seletores CSS.

Este artigo o guiará sobre a mudança de conteúdo no CSS.

Como alterar o conteúdo no CSS?

Para alterar o conteúdo no CSS, usaremos os métodos abaixo:

  • :: após seletor com a propriedade de conteúdo
  • :: antes do seletor com a propriedade de conteúdo

Vamos passar por cada método um por um!

Método 1: Use :: After Selector With Content Property para alterar o conteúdo no 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 “mostrar”A propriedade pode ser utilizada para ocultar o conteúdo existente.

Vamos dar uma olhada no exemplo abaixo para entender como alterar o conteúdo no CSS usando o :: após seletor.

Exemplo

Aqui está a nossa página HTML com o texto “Bom dia!!!”. Vamos substituir o conteúdo adicionado:

Atualmente, adicionamos um “

Bom dia!!!

Em nosso arquivo CSS, agora usaremos o :: após seletor como “corpo :: depois”E use o“contente”Propriedade 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 “mostrar”Propriedade e defina seu valor como“nenhum”:

Agora, salve seu arquivo HTML e simplesmente abra -o no navegador ou use “Servidor ao vivo”Para o mesmo propósito:

Como você pode ver, o conteúdo foi alterado usando com sucesso o seletor :: após o CSS:

Método 2: Use :: Antes do Seletor com Propriedade de Conteúdo para Alterar o Conteúdo no CSS

No CSS, o “::antes”O seletor é utilizado para fazer o conteúdo aparecer logo antes do conteúdo existente de um elemento. Pode ser usado em combinação com o “contente”Propriedade para adicionar novo conteúdo ao elemento selecionado.

Exemplo

Especifique o :: antes do seletor 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:

Saída

Explicamos métodos diferentes para alterar o conteúdo no CSS.

Conclusão

Para mudar o conteúdo, “::depois" e "::antes”Os 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 de CSS funciona oposto. Além disso, o “mostrar”A propriedade pode ser utilizada para ocultar o conteúdo existente de um elemento. É assim que o conteúdo é alterado completamente no CSS. Cobrimos os dois métodos de alteração do conteúdo no CSS.