Vous avez probablement souvent entendu parler des before after, ces pseudo-éléments CSS. Nous allons à travers ce tutoriel voir comment ces éléments fonctionnent, ainsi que quelques exemples d’utilisation pratiques et designs.
Pour ce tutoriel, vous aurez besoin de maîtriser les fondamentaux du CSS : Les propriétés de base ainsi que les pseudo-éléments.
Si ce n’est pas le cas vous pouvez faire appel à un développeur CSS en déposant une annonce gratuitement sur Codeur.com !
Sommaire :
Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal.
Trouver un développeur web
Qu’est-ce que les pseudo-éléments CSS « :before » et « :after » ?
Ces deux pseudo-éléments viennent rajouter un contenu virtuel sur une balise HTML. Comme leur nom l’indique, un élément virtuel avant et un élément virtuel après.
.selector:before {}
.seletor:after {}La particularité de ces deux pseudo-éléments, c’est qui le requiert une propriété « content ». Cette propriété vient rajouter du contenu textuel dans l’élément ciblé. Sans cela, :before and :after ne s’afficheront pas. Bien entendu, si on ne veut pas afficher de contenu ou de texte quelconque dont notre before de notre after, on peut indiquer un content vide, comme ceci :
.selector:before, .selector:after {
content: "";
}Concrètement, dans quel(s) cas peut-on les pseudo-éléments :before et :after ?
- Dans un fil d’Ariane, indiquer la séparation entre les différents éléments ;
- Pour personnaliser une liste à puce ;
- Pour ajouter des éléments visuels, comme par exemple un souligné un peu spécifique, une bordure animé, etc.
Voyons quelques-uns de ces exemples.
Trouvez le meilleur développeur web sur Codeur.com
Vos premiers devis en 15 minutes
Gratuit et sans obligation
Déjà plus de 75 000 clients
Exemple d’application : fil d’Ariane
Le fil d’Ariane, ou « breadcrumb », et une ligne, généralement en haut du site, qui permet de se situer dans la navigation, de la page d’accueil jusqu’à la page actuelle.
Ici, réaliser un fil d’Ariane où chaque élément commence par un point de type « bullet » (•), et tous sauf le dernier son suivi dans slash (/).
Afin de respecter les balises sémantique, votre fille de Marianne sera donc une liste à puce ul avec un li et un lien par élément.
Exemple :
<ul class="breadcrumb">
<li><a href="#">Accueil</a></li>
<li><a href="#">Produits</a></li>
<li><a href="#">Nom du produit</a></li>
</ul>.breadcrumb {
margin: 0;
padding: 0;
}
.breadcrumb li {
list-style: none;
display: inline-block;
}Il me reste plus qu’à ajouter les pseudo-éléments :before and :after.
.breadcrumb li a:before {
content: "•";
display: inline-block;
margin-right: 2px;
}
.breadcrumb li:not(:last-child):after {
content: "/";
display: inline-block;
margin-left: 5px;
}En cliquant ici, vous pouvez accéder au code complet.
Exemple d’application : souligné design
Dans cet exemple, nous allons ajouter un souligné à un titre. Mais, au lieu de souligner entièrement le texte avec un trait noir d’un pixel, nous allons le souligner partiellement avec un trait plus large et dégradé.
Voici déjà le HTML de basse :
<h1>Titre de la page</h1>Pour l’effet de soulignement, vous l’aurez compris, nous allons utiliser un pseudo-élément :after. Afin qu’il soit centré sous le texte, nous allons également jouer avec le positionnement relatif et absolut. Pour le reste, c’est du CSS classique.
-h1 {
position: relative;
text-align: center;
}
h1:after {
content: "";
display: block;
position: absolute;
bottom: -3px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 3px;
background: linear-gradient(to right, #346abf 0%, #7096d2 100%);
}Voici le résultat.
Exemple d’application : bordure animé
Pour ce dernier exemple, nous allons créer une bordure animée.
Voici le résultat final.
Nous allons décortiquer le code :
Tout d’abord, les problèmes de calculs de pixel, nous allons passer de tous les éléments en box-sizing: border-box;.
Ensuite, nous allons créer notre encart .frame qui aura le droit à sa bordure animée.
Enfin, c’est ton jour sur les positionnements, les transitions, avec quelques pixels, que nous allons avant notre animation.
Notre astuce pour utiliser les pseudo-éléments :after et :before en CSS
Maintenant que vous savez comment fonctionnent les pseudo-éléments CSS :after et :before, et que vous avez vu quelques exemples d’application, il ne vous reste plus qu’à utiliser votre imagination et ajouter de nouveaux designs à votre site internet.
Si vous n’avez du mal à utiliser les pseudo-éléments, qu’une notion vue dans ce tutoriel est abstraite, ou que la mise en pratique vous donne du fil à retordre, alors n’hésitez pas à demander de l’aide à un professionnel. Sur Codeur.com vous trouverez de nombreux développeurs CSS disponibles pour réaliser votre projet alors n’attendez plus et déposez une annonce gratuitement.
