Highlight Marker
Un dégradé CSS ancré en bas du texte s'étire au survol comme un coup de surligneur — effet purement CSS, aucune dépendance.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Texte comprend 56 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La propriété raccourcie background combine en une ligne le dégradé, sa position et sa taille initiale : linear-gradient(120deg, #84fab0 0, #8fd3f4 100%) 0 100%/0 100% no-repeat. La valeur 0 100% avant le slash ancre le fond en bas à gauche de l'élément ; 0 100% après le slash fixe la taille de départ à zéro largeur, hauteur complète — le dégradé est présent dans le DOM mais invisible.
Au survol, background-size: 100% 100% étend la largeur à 100 % de l'élément. La règle transition: background-size .3s anime ce changement de dimension : le fond croît de gauche à droite, reproduisant le geste d'un surligneur. Le dégradé à 120° (vert menthe → bleu ciel) ajoute une légère diagonale qui renforce l'aspect matière.
L'effet ne contient aucun JS : une seule classe CSS à ajouter sur n'importe quel élément inline ou block. Aucune bibliothèque, aucun événement. Compatible avec tous les frameworks (React, Vue, Svelte, Angular) — copiez les deux règles CSS et appliquez la classe.
Accessibilité
- prefers-reduced-motion absent du code : la transition s'exécute pour tous les utilisateurs, y compris ceux qui ont activé la réduction de mouvement dans leur OS. Pour respecter cette préférence, ajoutez :
@media (prefers-reduced-motion: reduce) { .text-highlight { transition: none } }. - L'effet est uniquement déclenché au survol (
:hover) — aucun état:focusni:focus-visiblen'est défini dans le code. Les utilisateurs au clavier ne verront pas l'effet. Correction recommandée :.text-highlight:focus-visible { background-size: 100% 100% }. - Le dégradé est purement décoratif — aucun attribut
aria-*n'est nécessaire. Vérifiez que le texte reste lisible sur le fond coloré (ratio WCAG AA ≥ 4,5:1 selon les couleurs choisies). - Sur mobile (sans survol souris), l'élément s'affiche sans effet : il reste lisible mais le surligneur n'apparaît jamais sur écran tactile sans adaptation JS supplémentaire.
Compatibilité navigateur
Nécessite uniquement CSS3 background-size et transitions — supportés universellement depuis 2013.
Sans support de <code>background-size</code> (IE ≤ 8), le fond reste absent — le texte est lisible, aucun JS n'est compromis. Sur mobile (sans survol), l'élément s'affiche sans effet.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<span class="text-highlight">Terme mis en avant</span>
<!-- Dans un texte courant -->
<p>
Une phrase avec un
<span class="text-highlight">mot important</span>
mis en évidence au survol.
</p>
<!-- Dans un titre -->
<h2>
Créez des interfaces
<span class="text-highlight">mémorables</span>
</h2>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| Couleur de départ (#84fab0) | #84fab0 | Première couleur du dégradé (gauche). À modifier dans la règle .text-highlight, propriété background. |
| Couleur de fin (#8fd3f4) | #8fd3f4 | Deuxième couleur du dégradé (droite). Même propriété, deuxième stop. |
| Angle (120deg) | 120deg | Inclinaison du dégradé. 90deg = horizontal pur, 120deg = légère diagonale, 180deg = de haut en bas. |
| Durée (.3s dans transition) | 0.3s | Vitesse d'apparition du surligneur. 0.2s = instantané, 0.5s = lent et analogique. |
| Hauteur du marqueur (2e valeur au survol) | 100% | Second paramètre de background-size dans :hover. 100% = couvre tout le texte, 50% = surligneur épais, 15% = fine ligne de soulignement. |
| Position verticale (0 100% avant le slash) | 0 100% | Ancrage vertical du fond. 0 100% = bas (style underline), 0 50% = centre du texte, 0 0% = haut. |
| :focus-visible (absent) | — | Ajoutez .text-highlight:focus-visible { background-size: 100% 100% } pour activer le surligneur à la navigation clavier. |
FAQ
<span class="text-highlight"> séparé. Comme l'effet repose sur background-size au niveau de chaque élément, chaque span se surligne indépendamment au survol. Aucune collision entre instances.<span> inline dont le texte coupe à la ligne, le background est calculé sur la boîte englobante totale — le fond couvre un seul rectangle, pas chaque ligne individuellement. Pour un rendu multiligne, découpez le texte en plusieurs spans, ou utilisez -webkit-box-decoration-break: clone; box-decoration-break: clone (support partiel, Chrome et Firefox)..text-highlight:hover { background-size: 100% 100% } par une @keyframes qui anime background-size de 0 100% à 100% 100%, appliquée directement à .text-highlight. Ajoutez animation-fill-mode: forwards pour maintenir l'état final. Ajoutez animation-delay pour décaler les spans successifs.
