28172 sujets

CSS et mise en forme, CSS3

[Résolu] Soulignement lien largeur fixe

Bonjour à tous,

J'avais posté ce sujet pour les sous-menu et ça fonctionne bien : affichage d'un trait de 40px au passage de la souris sur un élément du sous menu.
https://forum.alsacreations.com/topic-4-85176-1-Resolu-Soulignement-dun-lien-de-nav-avec-un-tiret-de-largeur-fixe.html

J'avais vu ça ici : https://www.deeptechforgood.eu/

Je voudrais reproduire le même comportement sur un simple lien textuel de mon site mais je n'y arrive pas. Quelle css dois-je appliquer au a et a:hover ?
Merciiiiiiiiiii et bon dimanche
Modérateur
a écrit :

Je voudrais reproduire le même comportement sur un simple lien textuel de mon site mais je n'y arrive pas. Quelle css dois-je appliquer au a et a:hover ?


Et l'eau,

à priori oui avec display inline-block pour plus de sécurité. Mais tout dépend du comportement voulu. Si ton lien est sur plusieurs lignes (utilisation de cet élément <br>), le principe d'utiliser les pseudos éléments :before ou :after ne te seront d'aucune aide. Dans ce cas, il va falloir se tourner vers linear gradient
Modifié par niuxe (28 Jul 2019 - 14:35)
Bonjour Raphaël et merci !
Si je veux que le trait ne fasse que 40px de large, je mets la width où ?
Bonne journée !
Administrateur
Il s'agit d'une image de fond, donc tu contrôles la taille avec background-size: 0 1px; (le 0 vaut pour la largeur initiale, et le 1px pour la hauteur initiale).
Hum je ne comprends pas. Si je joue avec le 0 1px, ça change les valeurs initiales. Je voudrais que quand le trait se trace, il ne souligne pas le mot en entier mais seulement le début du mot.
Administrateur
Newki75 a écrit :
Je voudrais que quand le trait se trace, il ne souligne pas le mot en entier mais seulement le début du mot.

Quand le trait se trace, cela correspond à l'état de survol, c'est donc les valeurs à l'intérieur du sélecteur ":hover" qu'il faut modifier.
Si c'est la largeur que tu veux fixer à 40px, il suffit de modifier le "0" par "40px"
Ca y est j'ai réussi lol dur le lundi matin quand on a bossé tt le we. Dans ton code c'était 100% 1px mais mettant ça, ça fonctionne :
nav a:hover {
background-size: 40px 1px;
}
Merci bcp et bonne journée !
Sujet clos
Aller à