This tutorial is from open-source community. Access the source code
En este laboratorio, exploraremos la programación CSS y aprenderemos cómo dar estilo a enlaces sin texto. Específicamente, usaremos las pseudo-clases :empty y :not, así como la propiedad content y la función attr(), para mostrar la URL del enlace en el pseudo-elemento ::before. Al final de este laboratorio, tendrás una mejor comprensión de cómo manipular la apariencia de los enlaces en tus páginas web.
index.html y style.css ya se han proporcionado en la máquina virtual.
Para mostrar la URL del enlace para enlaces que no tienen texto, puedes usar la pseudo-clase :empty para seleccionar tales enlaces, la pseudo-clase :not para excluir enlaces con texto y la propiedad content en combinación con la función attr() para mostrar la URL del enlace en el pseudo-elemento ::before. Aquí hay un fragmento de código de ejemplo:
<a href="https://30secondsofcode.org"></a>a[href^="http"]:empty::before {
content: attr(href);
}Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.
¡Felicidades! Has completado el laboratorio Dar estilo a enlaces sin texto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.