Introduction
Dans ce laboratoire, nous allons explorer la programmation CSS et apprendre à styliser les liens sans texte. Plus précisément, nous utiliserons les pseudo-classes :empty et :not, ainsi que la propriété content et la fonction attr(), pour afficher l'URL du lien dans le pseudo-élément ::before. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la manière de manipuler l'apparence des liens dans vos pages web.
Style Links With No Text
index.html et style.css ont déjà été fournis dans la machine virtuelle.
Pour afficher l'URL du lien pour les liens qui n'ont pas de texte, vous pouvez utiliser la pseudo-classe :empty pour sélectionner de tels liens, la pseudo-classe :not pour exclure les liens avec du texte, et la propriété content en combinaison avec la fonction attr() pour afficher l'URL du lien dans le pseudo-élément ::before. Voici un extrait de code d'exemple :
<a href="https://30secondsofcode.org"></a>
a[href^="http"]:empty::before {
content: attr(href);
}
Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.
Summary
Félicitations! Vous avez terminé le laboratoire Style Links With No Text. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.