Solucionado (ver solución)
Solucionado
(ver solución)
6
respuestas

Pseudo-elementos: Por qué no aparece unicode estrella en mi lista de diferenciales

Hola, creo que he intentado todas las formas posibles de poner mi pseudo-elemento en CSS3: llamando el pseudo-elemento con dobles dos puntos, luego con un dos puntos; copiando el símbolo de la estrella, copiando el código CSS de la estrella, pero no aparece y no sé cuál podría ser el problema Primer intento:

.items::before{
    content: ★;
}

Segundo intento:

.items::before{
    content: \2605;
}

Tercer intento:

.items:before{
    content: ★;
}

Cuarto intento:

.items:before{
    content: \2605;
}

En todos los intentos no aparece nada :c Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

6 respuestas

¡Hola Mónica!

Entiendo tu frustración al intentar utilizar pseudo-elementos en CSS3 para mostrar la estrella Unicode en tu lista de diferencias. Parece que has intentado varias formas de hacerlo, pero no has logrado que aparezca. A veces, los pseudo-elementos pueden ser un poco complicados de manejar, pero estoy aquí para ayudarte.

Después de revisar detenidamente el codígo que compartiste, parece que el problema podría estar en la forma en que estás llamando al pseudo-elemento. En lugar de usar "items::before" o "items:before", podrías intentar usar "li::before" para apuntar específicamente a los elementos de la lista.

Por ejemplo:

li::before {
    content: "\2605";
}

Además, asegúrate de que la propiedad "content" esté entre comillas dobles y que el código Unicode esté precedido por una barra invertida.

Espero que este enfoque te ayude a solucionar el problema y que puedas ver las estrellas Unicode en tu lista de diferencias. ¡Buena suerte!

¡Saludos!

Si este post te ayudó, por favor marca como solucionado ✓. ¡Continúa con tus estudios!
solución!

Hola, mucha gracias por la respuesta. Ya solucioné el problema copiando el código que proporcionan en el aula:

.items:before{
    content:"★"
}

Aunque igual se me hace extraño porque es básicamente el mismo que usé antes, pienso que quizá tenga que ver de dónde proviene la estrella que yo usé, puede ser lo único diferente.

.items:before{ content:"★" }

¡Hola Mónica! ¿Cómo estás?

Le diferencia entre tu código y el de la página de alura está en las comillas (" "), después del content: la información que quieras anexar debe estar enmarcada entre comillas:

Tercer intento:

.items:before{
    content: "★";
}

Cuarto intento:

.items:before{
    content: "\2605";
}

Espero que te sea útil para identificar la diferencia. ¡Saludos!

Hola, Luisa, ¡es cierto! Muchas gracias

Debe ser porque no añadiste el

  • tag