✅Agregar Contenido Antes y/o después de un Elemento con CSS

Podemos agregar contenido antes o después de un elemento con CSS utilizando las propiedades:

::before ::afterLenguaje del código: CSS (css)

Si por ejemplo queremos agregar un emoticono antes de todos los títulos H2 podemos utilizar el siguiente código:

h2::before{ content: ' ☝️'; }Lenguaje del código: CSS (css)

El resultado sería el siguiente:

propiedad-after-bedore-css

Para copiar emoticonos CLICK AQUÍ.

Si por ejemplo queremos agregar un texto al final del precio de algún producto o servicio que ofrezcamos podríamos utilizar el siguiente código:

.hp-listing__attribute.hp-listing__attribute--price::after{ content:'+IVA'; }Lenguaje del código: CSS (css)

Obtendríamos algo como esto:

propiedad after y before de css

Para averiguar la class o id de cualquier elemento hacemos clic con el botón derecho del ratón y seleccionamos ‘Inspeccionar’.

Hacemos clic en la flechita de la esquina superior izquierda y con el puntero del ratón seleccionamos un elemento.

Puedes agregar el código en Apariencia – Personalizar – CSS Adicional.

inspector css

Nos vemos en el siguiente tutorial. Un saludo.

Compartir Artículo