Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

247
Vistas
¿Qué puedes poner antes del pseudo contenido en css?

Inspeccioné un ícono en un sitio web y noté que tiene algo como esto en css antes del contenido:

 .c-navi-new-list__category-link--fresh:before { content: "\E0B3\00FE0E"; font-size: 16px; font-size: 1.143rem; line-height: 1.375; color: #a1a3a8; margin-left: 4px; }

¿Qué es exactamente ese código dentro del contenido? ¿Cómo puedo modificarlo?

about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

¿Qué es exactamente ese código dentro del contenido? ¿Cómo puedo modificarlo?

El código dentro de la propiedad content: representa dos cosas:

La primera parte, \E0B3 , es la representación CSS de un icono de carácter UTF-8.

Como @shafayetmaruf ya ha mostrado en su enlace de salida, el símbolo es un cuadro rectangular (ver también: https://utf8-icons.com/utf-8-character-57523 ).

Para cambiar el símbolo que se representa, simplemente puede cambiarlo a un código de icono diferente (consulte https://www.utf8icons.com/ para ver otros ejemplos).

La segunda parte, \00FE0E es el selector de variación Unicode de 'estilo de texto'. Básicamente, al usar íconos Unicode, algunos navegadores mostrarán el ícono como un emoji en lugar de como texto. El inconveniente de esto es que la versión de emoji no se puede diseñar con CSS, mientras que la versión de texto sí. El selector de variación Unicode obliga al icono especificado en la primera parte a mostrarse como texto para que el desarrollador pueda diseñarlo con CSS.

Consulte esta pregunta SO para obtener más información: ¿Cómo evitar que los caracteres Unicode se representen como emoji en HTML desde JavaScript?

Por cierto, para descubrir todo esto, todo lo que hice fue buscar en Google las diferentes partes del 'contenido' y, como de costumbre, Google God proporcionó.

about 4 years ago · Juan Pablo Isaza Denunciar

0

Lo modifica a través de CSS normal si eso es lo que está preguntando.

about 4 years ago · Juan Pablo Isaza Denunciar

0

No sé lo que en realidad quieres saber. Pero a partir de su comentario en la respuesta de Marcus, asumo que desea saber qué está sucediendo con este fragmento de código.

Supongamos que tenemos un párrafo

 <p>This is a paragraph</p>

Ahora, si implementamos tu css, veamos qué sucede:

 p::before { content: "\E0B3\00FE0E"; font-size: 16px; font-size: 1.143rem; line-height: 1.375; color: #a1a3a8; margin-left: 4px; }

La salida será así: [salida] https://i.stack.imgur.com/KFQpY.png

Ahora veamos cuál es la responsabilidad de cada línea aquí:

  1. ::"before" - etiqueta significa que estamos haciendo algo antes del párrafo
  2. "contenido": significa que estamos agregando algo de contenido antes del párrafo en nuestro caso, que era un ícono.
  3. "font-size": se refiere a que el tamaño de fuente de nuestro contenido agregado será de 10 px y luego cambió a 1.143 rem (rem es una unidad de medida).
  4. "line-height" - se refiere a cuál será la distancia entre dos líneas
  5. "color" - se refiere al color del icono.
  6. "margin-left" - se refiere a que estamos poniendo algo de espacio en el lado izquierdo del ícono. En nuestro caso que es 4px.
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda