Styliser les liens sans texte

CSSCSSBeginner
Pratiquer maintenant

This tutorial is from open-source community. Access the source code

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

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.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") subgraph Lab Skills css/selectors -.-> lab-35190{{"Styliser les liens sans texte"}} css/pseudo_classes -.-> lab-35190{{"Styliser les liens sans texte"}} css/pseudo_elements -.-> lab-35190{{"Styliser les liens sans texte"}} end

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.