A substituição de um texto é feita principalmente em linguagens de programação do lado do servidor, incluindo PHP. No entanto, os desenvolvedores ocasionalmente trabalham sob algumas limitações e não podem substituir o texto no servidor. Nesses cenários, substituir o texto usando CSS é uma boa escolha. Se o usuário deseja substituir o texto, CSS “contente”A propriedade pode ser utilizada. Além disso, você também pode estilizar o texto substituído usando CSS.

Este tutorial examinará:

• Como adicionar texto em html?
• Como substituir o texto por CSS?

Como adicionar texto em html?

No HTML, o texto pode ser adicionado de maneiras diferentes, como um elemento de cabeçalho “

”É usado para adicionar o texto do cabeçalho, ou o“

Passe as instruções fornecidas para adicionar o texto ao documento HTML.

Etapa 1: Crie um contêiner "div"

Faça um elemento "div" com a ajuda do "" marcação. Além disso, insira um “eu ia”Atributo para alocar um nome específico para um elemento.

Etapa 2: Adicione texto

Em seguida, utilize a tag de parágrafo “

”E atribua um“aula”Atributo. Em seguida, incorpore algum texto entre as tags do parágrafo:

Linuxhint é um dos melhores sites de tutoriais. (Texto antigo)

Pode -se observar que o texto foi adicionado com sucesso:

Etapa 3: Elemento de estilo “div”

Agora, utilize o “eu ia"Seletor e ID"#Main-Div”Para acessar o elemento“ div ”. Em seguida, aplique as propriedades abaixo do ponto:

#main-div
borda: 3px preto sólido;
Background-Color: RGB (179, 233, 250);
margem: 50px;
estilo de fonte: itálico;

Aqui:

• ““fronteira”A propriedade é usada para definir um limite ao redor do elemento.
• ““cor de fundo”Propriedade aloca uma cor na parte traseira do elemento.
• ““margem”Especifica um espaço ao redor do limite do elemento.
• ““estilo de fonte”Determina o estilo específico para um texto como“itálico”:

Como substituir o texto por CSS?

Para substituir o texto pelo CSS, primeiro ocultar o texto anterior, utilizando o “visibilidade" propriedade. Então, incorpore o texto usando o “contente" propriedade.

Para substituir o texto no CSS, experimente o procedimento fornecido.

Etapa 1: ocultar o texto antigo

Primeiro, acesse o elemento em que você incorporou o texto. Em nosso cenário, acessaremos o “

”Elemento pelo nome da classe“.Substituir-text”. Então, aplique o “posição" e "visibilidade”Propriedades:

.Substituir-text
Posição: relativa;
Visibilidade: escondida;

Aqui o "posição”Especifica que o elemento será posicionado em relação à sua posição normal na página da web, e o“visibilidade”A propriedade é usada para ocultar o elemento.

Saída

Etapa 2: Substitua o texto

Acesse o texto do “

”Tag pela classe“.Substituir-text”. Além disso, utilize a pseudo-classe “:depois”Que inserirá o texto após o conteúdo do elemento selecionado:

.Substituir-text: após
Conteúdo: "Linuxhint é uma organização baseada no Reino Unido. (Novo texto) ";
Posição: Absoluto;
visibilidade: visível;
Esquerda: 0;
topo: 0;

A descrição das propriedades acima mencionadas é a seguinte:

• ““contente”A propriedade é utilizada para adicionar o conteúdo no elemento selecionado.
• ““esquerda”No CSS é usado para alocar a posição horizontal de um elemento que está posicionado.
• ““principal”Especifica a posição no lado superior de um elemento.
• ““visibilidade"É definido como"visível”Para mostrar o conteúdo dentro da div.

Saída

Pode -se notar que o texto é substituído com sucesso usando CSS.

Conclusão

Para substituir o texto pelo CSS, primeiro, adicione o texto utilizando o “

" marcação. Então, acesse o “

”Elemento no CSS usando a classe atribuída e aplique o“visibilidade”Propriedade com o valor“escondido”Para esconder o texto antigo. Depois disso, use a pseudo-classe “:depois”Com a classe atribuída do“

" elemento. Substitua o texto pela ajuda do “contente”Propriedade, e novamente defina o“visibilidade"Propriedade como"visível”. Este post explicou o método para substituir o texto de HTML usando CSS.