Des liens qui s'annoncent — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 2)

Des liens qui s'annoncent

Sélecteurs · niveau 2

Énoncé


  <h1>Ressources</h1>
  <ul>
    <li><a href="https://docs.oracle.com/en/java/">Documentation de Java</a></li>
    <li><a href="tarifs.pdf">Nos tarifs étudiants</a></li>
    <li><a href="mailto:contact@librairie-campus.fr">Écrire à la librairie</a></li>
    <li><a href="catalogue.html">Le catalogue</a></li>
  </ul>

Sans toucher au HTML, faire suivre les liens vers un autre site d'une flèche ↗, faire suivre les liens vers un PDF de la mention « (PDF) » en gris, et précéder les adresses électroniques d'une enveloppe ✉. Pourquoi est-ce un usage légitime du contenu généré ?

Corrigé


body {
  font-family: system-ui, sans-serif;
}

a {
  color: #1f3a68;
}

/* Lien vers un autre site */
a[href^="http"]::after {
  content: " ↗";
}

/* Document PDF */
a[href$=".pdf"]::after {
  content: " (PDF)";
  color: #555;
}

/* Adresse électronique */
a[href^="mailto:"]::before {
  content: "✉ ";
}

a[href^="http"] couvre http:// et https://. Le contenu généré est ici purement indicatif : la même information se lit dans l'adresse du lien (et un lecteur d'écran annonce de toute façon un lien vers un fichier PDF ou une adresse électronique). Si le symbole n'était pas lu, rien d'essentiel ne serait perdu.