Les pseudo-éléments sont des éléments supplémentaires à ajouter dans le fichier css de votre site Internet. Ils permettent de pousser la personnalisation des éléments et de les animer avec des effets toujours plus recherchés.
Rappel CSS
Le CSS est l’acronyme de l’anglais Cascading Style Sheets, que nous traduisons par « Feuilles de Style en Cascade ». C’est un langage informatique qui permet d’effectuer la mise en forme des pages d’un site Internet. Il suffit d’associer des classes (.content) ou des identifiants (#content), en plus des balises, aux éléments de la page afin de pouvoir écrire les règles css correspondantes. De cette manière nous pouvons leur donner une taille, une couleur, des marges…
Les pseudo-éléments
Je vais maintenant m’intéresser à ces marqueurs. Les plus connus sont le :before et le :after. Ils permettent d’insérer un élément « fantôme » avant ou après le contenu de l’élément ciblé. C’est un élément factice qui apparaît aux yeux de l’utilisateur à partir du moment où on lui applique du style CSS. Les pseudo-éléments before et after permettent un très grand nombre de personnalisations pour votre site Internet. Cependant, ils ne sont pas les seuls dans leur genre. Les pseudo-éléments sont reconnaissables car ils commencent par les deux-points. Il existe d’autres marqueurs de ce type, comme le :first-child (premier enfant d’un élément), :first-letter (modifier la première lettre) ou ::selection (récupérer le texte sélectionné). Ils permettent tous d’apporter un changement aux éléments ciblés.
Il existe également les pseudo-classes, qui permettent de se concentrer sur les interactions avec l’utilisateur comme le :hover (survole), :active (le lien qui vient d’être cliqué) ou encore :focus (lien sélectionné).
Les pseudo-éléments sont attribués au parent grâce au : . Normalement, pour les distinguer des pseudo-classes, on leur affecte un double :: . Cependant pour un souci de compatibilité avec les navigateurs, il est recommandé d’utiliser le simple deux-points . Tous les navigateurs qui supportent la syntaxe des ::, supportent également les simples : . Les deux sont donc tolérés.
Revenons aux premiers marqueurs. Si vous utilisez le :before, le pseudo-élément est inséré à l’intérieur de notre élément mais avant le contenu. L’élément :after sera inséré à l’intérieur mais après le contenu. Ce qui peut vous permettre d’animer au passage de la souris le before puis le after, pour de meilleurs effets.
Mettre en place le :before ou le :after
Une fois qu’un pseudo-élément est attribué à un sélecteur, il faut mettre en place le contenu pour que l’élément fonctionne correctement. Pour cela, il faut insérer la valeur content. Elle peut être égale à :
- Une chaine de caractères : content : “caracteres »; – elle peut être utile si vous souhaitez insérer des éléments textuels.
- Une image : content: url(/chemin/dossier/votreimage.jpg); – très utile si vous voulez la faire apparaitre au hover de l’élément. Dans la mesure ou un dégradé est aussi une image, vous pouvez également faire apparaitre un dégradé. L’image sera insérée a ses dimensions exactes et ne sera pas redimensionnée.
- Rien : content : ‘’; – utile pour les clear fix ou pour insérer des images en arrière- plan. Vous pourrez aussi animer une bordure ou une forme…
Exemple de règle CSS avec un before :
figcaption::before { content : ""; display:block; position:absolute; width:100%; height:2px; top:0; margin-top:20px; background-color:#000; animation: all 400ms linear; }
Sachez que si vous oubliez de spécifier le content, votre élément ne sera pas visible. Combien de fois j’ai cherché d’où venait le problème, alors que c’était simplement à cause de cette petite ligne manquante… Je vous conseille donc de commencer par taper cette ligne une fois que vous aurez ouvert vos accolades !
Avec les pseudo-éléments il y a de quoi s’amuser. Ce sont des éléments qui vous permettront de sublimer votre site Internet facilement et sans modération ! Le site Internet de Codrops propose de superbes effets construits avec des pseudo-éléments. Allez tester ! 🙂
Dans le même univers
-
Astuces - Site Web
25 janvier 2022
Pourquoi utiliser un CMS ? Découvrez les avantagesLire l'article
Vous entendez souvent ce mot autour de vous ? Vous en avez marre de ne pas savoir de quoi il …
Continuer la lecture de « Pourquoi utiliser un CMS ? Découvrez les avantages »
-
Site Web
05 janvier 2022
Quelles sont les étapes de conception d'un site internet ?Lire l'article
Un site internet est un outil incontournable pour toutes les entreprises en 2022, tous secteurs confondus. Un site internet professionnel …
Continuer la lecture de « Quelles sont les étapes de conception d'un site internet ? »
-
Astuces - Site Web
24 novembre 2021
Pourquoi mettre à jour son site internet ? Une pratique essentielleLire l'article
Mettre à jour son site web, c’est augmenter le nombre d’informations, le nombre de pages et le contenu de son …
Continuer la lecture de « Pourquoi mettre à jour son site internet ? Une pratique essentielle »