Hola, si bien platzi muestra tus cursos aprobados dentro de una ruta con el círculo verde exterior. La verdad me era difícil apreciarlo a simple vista… por lo que me di a la tarea de escribir mi propio CSS, para modificar el comportamiento de la página.
Uno puede inspeccionar el codigo de una pagina, y modificar los estilos, claro todo los cambios se borrarán cuando se refresque la página… Pero es de utilidad para explorar e ir haciendo una estrategia para diseñar tu codigo.
Como se puede observar, en el editor de codigo, los badgages de cursos concluidos tienen la clase CSS “is-approved”. Ocuparemos esta clase para embeber nuestros cambios.
Para hacer que nuestros cambios se guarden en nuestro navegador, podremos ocupar la extension llamada Stylish; la cual permite salvar cambios de estilo y aplicarlos de nuevo cada vez que entramos a la pagina web correspondiente.
Con esta herramienta podemos empezar a escribir nuestro css hack. Como mencione anteriormente usaremos la clase is-approved sin embargo en este caso no queremos sobre escribir las propiedades de este estilo, sino agregar unas cuantas… para lo que nos valdremos del modificador de seleccion :before
Lo primero seria conseguir una imagen publica para insertarla junto a cada badge de nuestros cursos terminados… Yo elegi una flechita verde. Ocupando la propiedad **content ** cargamos la imagen desde su url.
Y finalmente la acomodamos en la poscion (position:absolute, width, height) y tamaño (transform: scale(0.8)) que mas nos convenza . Finalmente vemos el resultado:
El tema terminado lo puedes instalar en tu navegador en la siguiente liga: Instalar
Espero les sea de utilidad y si crean otros estilos estare encantado de que los compartan.
Curso de HTML y CSS 2019
