Adicione, substitua ou altere o texto com CSS

Oi pessoal

Neste tutorial vamos ver como podemos adicionar um texto através de CSS, mesmo substituindo um texto existente.

Claro que existem outros métodos melhores, modificando o php (se seu site for feito com WordPress), mas se queremos uma solução rápida ou não sabemos como fazer de outra forma, pode nos tirar de mais de um dificuldade.

Como veremos neste tutorial, fazer isso é muito simples com um pouco de CSS.

Especificamente, vamos aprender a adicionar um texto na frente de outro existente, adicioná-lo após o texto existente ou substituí-lo pelo que queremos.

Vamos fazer um caso real para torná-lo mais claro.

Aqui está o tutorial em vídeo:

Na imagem a seguir podemos ver alguns produtos com o nome do produto:

Vamos ver como adicionar uma palavra na frente do nome do produto.

Para isso, vamos usar o inspetor de elementos para ver onde adicionar o CSS.

Clicamos com o botão direito do mouse em um dos títulos e veremos uma imagem como a seguinte:

Podemos ver que à direita há um sinal +, clicamos nele e a seguinte regra css vazia aparecerá:

Como a primeira coisa que vamos fazer é adicionar um texto na frente do título, vamos complementar a regra css da seguinte forma:

h2.woocommerce-loop-product__title:before {
	content: "Producto ";
}

Com o código anterior conseguimos que a palavra produto apareça em todos os nossos títulos:

Se quisermos atrás do título do produto, mudaremos a regra para o seguinte:

h2.woocommerce-loop-product__title:after {
	content: "Producto ";
}

Se o que queremos é substituir o texto pela palavra que queremos, temos que adicionar o seguinte código:

h2.woocommerce-loop-product__title {
	visibility: hidden;
}

h2.woocommerce-loop-product__title:before {
	content: " Producto ";
	visibility:visible;
}

Desta forma, primeiro ocultamos o nome do produto e depois tornamos visível a palavra que queríamos.

O resultado final seria:

Lembre-se que temos que adicionar essas alterações ao nosso WordPress.

Para isso vamos em Customize —> Additional CSS e adicionamos nosso código:

Às vezes podemos sair de confusões interessantes com um pouco de CSS.

Espero que ache útil e qualquer dúvida aqui você me tem 😉