Chapitre 175 | Pseudo-éléments ::before et ::after

Utilisation des pseudo-éléments ::before et ::after

Les pseudo-éléments ::before et ::after permettent d’ajouter du contenu avant ou après un élément HTML, sans modifier directement le HTML, uniquement grâce au CSS.

Explications :

1. ::before :
   • Ajoute du contenu avant le texte de l’élément ciblé (<p>).
   • Utilise la propriété content pour définir ce qui doit être ajouté.
2. ::after :
   • Ajoute du contenu après le texte de l’élément ciblé.
   • Utilise également la propriété content.
3. Styles personnalisés :
   • Les styles (color, font-weight, etc.) sont appliqués uniquement au contenu ajouté par ::before ou ::after.

---

Application pratique :

Ce type de technique est souvent utilisé pour :

• Ajouter des icônes, symboles ou textes supplémentaires.
• Décorer du contenu sans modifier le HTML.
• Gérer des animations ou des styles avancés.

Exercice

Veuillez accéder à ce PEN et effectuer les modifications demandées ci dessous.

Consigne de l’exercice :

1. Modifier le lien « Accueil » :
   • Utilisez le pseudo-élément ::before pour ajouter le texte Menu : avant le lien « Accueil » dans le menu.
   • Assurez-vous que ce texte soit affiché uniquement devant « Accueil ».
2. Modifier le titre « Lorem » dans la barre de menu :
   • Utilisez le pseudo-élément ::after pour ajouter le texte By Prénom après le titre « Lorem ».
   • Ce texte doit être en italique et en petite taille.

---

Rendu attendu :

• Dans la barre de menu :
  • Le lien « Accueil » doit afficher Menu : Accueil.
  • Le titre Lorem doit être suivi de By Prénom, écrit en italique et en petite taille.

Tips : Menu :Accueil. le double point va se coller à accueil ? même avec un espace ?? C’est normal ! Veuillez utiliser un padding right.

Tips : ciblez nav et h1

Bloqué ? Envie de vérifier ?