Añadir o modificar contenido con la clase css ::before

Añadir o sustituir un texto con el pseudoelemento ::before

A veces es posible que desee añadir un texto antes de un precio o simplemente sustituir un texto. A veces sugerimos a nuestros clientes que pueden utilizar la bandera "Novedades" para otra cosa, cortando otro texto para esa bandera, ya que puede activarse y desactivarse fácilmente. En este ejemplo, sin embargo, cambiaremos el texto de descuento por cualquier texto. Esta solución se aplica tanto en el Listado de Productos como en la Página de Productos.

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

Paso 1: Identificar la clase y la ubicación

Identifique qué clase debe tener el elemento ::before. Lo ideal es que se encuentre en la misma clase que el texto original. Tenga en cuenta que, dado que nuestros productos pueden tener varias clases diferentes, debe ser específico. Mirando la diapositiva de arriba, puede identificar que el texto es para "Oferta especial", por lo tanto es bueno incluir esa clase para estar absolutamente seguro de que sólo cambia el texto en esa diapositiva específica.

Paso 2: Añadir un elemento ::before

Ahora que hemos identificado dónde poner nuestro nuevo texto y sabemos que necesitamos especificar que sólo se aplica a la bandera "ofertas especiales", añadimos el elemento ::before a la última clase. Para que exista un elemento ::before o ::after, necesitamos declarar un content: " "; donde escribiremos nuestro nuevo texto. También necesitamos definir un font-size porque luego ocultaremos el texto original estableciendo font-size: 0;

Paso 3: Ocultar el texto original

Una vez que hayamos hecho el paso anterior y tengamos nuestro texto en su sitio, veremos que el texto original sigue ahí. Como nuestro nuevo texto está ahora en un elemento ::before que tiene su propio estilo, ahora podemos ajustar sólo el texto generado por defecto. En lugar de seleccionar nuestro ::before, volvemos a la clase que identificamos en el Paso 1 y establecemos font-size: 0; y display:block;. Como en el Paso 2 establecimos un tamaño de texto personalizado para nuestro elemento ::before, este elemento NO toma font-size: 0 sino que mantiene su tamaño tal y como lo establecimos en el Paso 2.

CSS para diferentes idiomas

Si tienes una página con diferentes idiomas, necesitas CSS en un ::before para cada idioma. La forma más fácil de hacerlo es usar :lang(en) antes de tus clases.

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