Pseudo-classes & pseudo-éléments
Donner vie et âme à tes éléments.
8.1 Les Pseudo-classes : Décrire les états
A. Les états d'interaction : :hover, :active, :focus
Ces trois états sont la base de toute interface interactive.
CSScss
.bouton-quete:hover {
background: #00838f;
transform: translateY(-3px);
}
.bouton-quete:active {
transform: translateY(1px);
}
.bouton-quete:focus {
outline: 3px solid #e0f7fa;
}B. Les états positionnels : :first-child, :last-child
CSScss
.liste li:first-child {
font-weight: bold;
}
.liste li:last-child {
opacity: 0.6;
}8.2 Les Pseudo-éléments : Invoquer des décorations
Un pseudo-élément (::) est un élément "virtuel". Combinons tout pour créer un bouton enchanté !
CSScss
.bouton-enchanté {
position: relative;
}
/* Invocation AVANT le texte */
.bouton-enchanté::before {
content: '✨';
position: absolute;
left: 1rem;
opacity: 0;
transition: all 0.3s ease;
}
.bouton-enchanté:hover {
padding-left: 3.5rem; /* Place pour l'étoile */
}
.bouton-enchanté:hover::before {
opacity: 1;
}