9.1 Pseudo-éléments ::before et ::after
Les pseudo-éléments ::before et ::after sont des outils puissants en CSS, qui permettent d'ajouter des éléments décoratifs avant ou après le contenu des éléments sans modifier le HTML. Ils sont largement utilisés pour créer des effets visuels, améliorer l'interface utilisateur, et ajouter des styles aux éléments.
Description :
::before: pseudo-élément ajouté avant le contenu de l'élément::after: pseudo-élément ajouté après le contenu de l'élément
Syntaxe :
element::before {
/* styles pour le pseudo-élément before */
}
element::after {
/* styles pour le pseudo-élément after */
}
Propriétés essentielles
Les pseudo-éléments ::before et ::after peuvent contenir quasiment toutes les propriétés CSS, y compris la couleur, la taille, le positionnement, l'arrière-plan, les ombres, etc. Cependant, pour qu'un pseudo-élément soit visible, il doit avoir un contenu et une taille définis.
content: définit le contenu du pseudo-élément. Peut être texte ou image, ainsi qu'une chaîne videdisplay: définit le type d'affichage du pseudo-élément. Généralementblockouinline-blockest utiliséposition: contrôle le positionnement du pseudo-élément (par exemple,absoluteourelative)widthetheight: définissent les dimensions du pseudo-élément
9.2 Ajout de texte
Avec la propriété content, il est facile d'ajouter du texte au début ou à la fin de tout élément.
.example::before {
content: "Début : ";
color: blue;
}
.example::after {
content: " :Fin";
color: red;
}
<body>
<p class="example">Ceci est un exemple de texte</p>
</body>
Explication du code :
.example::before: ajoute le texte "Début : " avant le contenu de l'élément et le colore en bleu.example::after: ajoute le texte " :Fin" après le contenu de l'élément et le colore en rouge
9.3 Lignes décoratives
Il est également possible d'ajouter des lignes décoratives encadrant le contenu :
.decorative-line::before,
.decorative-line::after {
content: "";
display: block;
height: 2px;
background: black;
margin: 10px 0;
}
<body>
<div class="decorative-line">Texte avec des lignes décoratives</div>
</body>
Explication du code :
.decorative-line::before: crée une ligne décorative avant le contenu de l'élément.decorative-line::after: crée une ligne décorative après le contenu de l'élément
9.4 Insertion d'icônes
Pas assez de texte ? Alors, on peut facilement insérer quelques icônes :
.icon::before {
content: url('https://via.placeholder.com/20');
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
<body>
<p class="icon">Texte avec une icône</p>
</body>
Explication du code :
.icon::before: ajoute une icône avant le texte en utilisant l'URL de l'image
9.5 Éléments décoratifs complexes
Et si on ajoutait quelque chose de plus complexe :
.complex-decor::before {
content: "";
display: block;
width: 50px;
height: 50px;
background: linear-gradient(45deg, #f06, transparent);
position: absolute;
top: -10px;
left: -10px;
}
.complex-decor {
position: relative;
padding: 20px;
background: #eee;
margin: 20px;
}
<body>
<div class="complex-decor">Élément avec coin décoratif</div>
</body>
Explication du code :
.complex-decor::before: crée un élément décoratif avant le contenu principal, en utilisant un dégradé et un positionnement absolu.complex-decor: définit un positionnement relatif pour l'élément parent afin que le pseudo-élément puisse se positionner par rapport à lui
9.6 Utilisation des animations
On peut même ajouter une animation :
.animated::before {
content: "";
display: block;
width: 100px;
height: 100px;
background: red;
animation: rotate 5s infinite;
margin: 20px auto;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
<body>
<div class="animated"></div>
</body>
Explication du code :
.animated::before: crée un pseudo-élément carré et anime sa rotation à l'aide de keyframes
GO TO FULL VERSION