Adicione ou altere conteúdo usando a classe CSS ::before

Adicione ou substitua um texto pelo pseudoelemento ::before

Às vezes pode ser que você queira adicionar um texto antes de um preço ou simplesmente substituir um texto. Às vezes sugerimos aos nossos clientes que você pode usar o sinalizador "Notícias" para outra coisa, cortando um texto diferente para esse sinalizador, pois ele pode ser facilmente ativado e desativado. Neste exemplo, entretanto, substituiremos o texto do desconto por qualquer texto de sua escolha. Esta solução é bem-sucedida tanto na lista de produtos quanto na página do produto.

Links:
https://www.w3schools.com/css/css_pseudo_elements.asp
https://www.w3schools.com/cssref/sel_lang.php

Etapa 1: Identificar a turma e location

Identifique qual classe deve ter o elemento ::before. O melhor é que está na mesma classe do texto original. Observe que como nossos produtos podem ter diversas bandeiras diferentes, você deve ser específico. Se você olhar o mergulho acima, poderá identificar que o texto é para "Oferta especial", portanto é bom incluir essa classe para que você tenha certeza absoluta de que só altera o texto no mergulho específico.

Etapa 2: adicione um elemento ::before

Agora que identificamos onde colocar nosso novo texto e sabemos que precisamos especificar que ele se aplica apenas ao sinalizador "ofertas especiais" então adicionamos ::before à última classe. Para que um elemento ::before ou ::after exista, é necessário que declaremos um content: " "; < /em> onde escrevemos nosso novo texto. Também precisamos definir um tamanho de fonte porque ocultaremos o texto original definindo font-size: 0;

Etapa 3: ocultar o texto original< /strong>< /p>

Quando concluímos a etapa anterior e colocamos nosso texto no lugar, vemos que o texto original ainda está lá. Como nosso novo texto new está em um elemento ::before que possui seu próprio estilo, agora podemos ajustar apenas o texto gerado pelo padrão. Em vez de marcar nosso ::before, voltamos para a classe que identificamos no Passo 1 e definimos font-size: 0; e < strong>exibição:bloco;. Como na Etapa 2 definimos nosso próprio tamanho de texto em nosso elemento ::before-, este elemento NÃO ocupa font-size: 0 mas mantém o tamanho que nós definido na Etapa 2.

CSS para idiomas diferentes

Se você tem uma página com idiomas diferentes, você precisa fazer CSS em um ::before para cada idioma. A maneira mais fácil de fazer isso é usar :lang(en) antes de suas aulas.

Exemplo:
:lang(en) .tws-article-labels--special-offer .tws -article-labels--label-text::before

Abicart - Marcar uma demonstração

Quer ver como pode utilizar o Abicart para as suas vendas em linha e na loja local? Marcar uma demonstração Experimente você mesmo!