✅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.

5/5 - (1 voto)
Compartir Artículo

Un comentario

  1. Fran Salas Master WP 1 año atrás

    Deja tus opiniones o dudas en los comentarios.

¿Tienes una duda o sugerencia sobre este artículo?

Puedes dejar un comentario de forma anónima, sin necesidad de registrarte ni proporcionar ningún dato personal. Tu mensaje se publicará como “Usuario Anónimo No Premium”, un perfil que agrupa a todos los visitantes no registrados.

Importante: para evitar el spam automático, todos los comentarios anónimos deben comenzar con el símbolo #. Ejemplo: # Tengo una duda sobre los shortcodes personalizados...

Este espacio está destinado exclusivamente a preguntas concretas, dudas o sugerencias relacionadas con el contenido del artículo. Por respeto a los demás lectores, no se publicarán temas sin relación.

Privacidad y normas:
  • No tienes que agregar tu nombre, correo ni ningún otro dato identificativo.
  • No se permiten enlaces en comentarios anónimos.
  • No se permiten símbolos especiales como < o > (menor y mayor que), ya que se consideran intentos de insertar código y serán bloqueados.
  • Todos los comentarios anónimos pasan por revisión antes de ser publicados y solo se aprobarán si aportan valor al contenido del artículo.
¿Quieres comentar con tu nombre y que tu mensaje se publique al instante? Inicia sesión o regístrate.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

0%