28172 sujets

CSS et mise en forme, CSS3

Lien sur plusieurs lignes et pseudo élément

Bonjour,

Quelqu'un aurait-il une idée / solution pour ce type d'enjolivement de survol de lien avec pseudo element :
https://jsfiddle.net/kerwdduj/

Lorsque l'on réduit la largeur pour afficher le lien sur plusieurs lignes, c'est pas top visuellement. Mais je ne vois pas comment faire. Je ne peux pas mettre un no-wrap sur un lien qui risque de s'étaler sur toute la longueur vu que je veux cibler par défaut tous les liens.

Merci d'avance

Smiley smile
Administrateur
Bonjour,

souligner chaque ligne ? Ca fait un peu "massif" mais c'est possible avec un gradient répété (j'ai fixé le line-height à 1.5 pour tomber pile ; il faut l'ajuster en même temps que la hauteur du gradient)

Fiddle : https://jsfiddle.net/san5z1gx/

Inconvénient : sous la dernière ligne, le soulignement se prolonge après le dernier mot. Je vais tenter un truc avec soit box-shadow soit flexbox. Edit: nan pas moyen d'avoir un bloc "de la fin de la dernière ligne jusqu'à la droite du bloc"
Modifié par Felipe (25 Mar 2016 - 23:18)
Merci beaucoup, mais tu as raison cela fait un peu massif.
Merci pour ton code qui de toute façon m'en apprend davantage.
:)
Modérateur
Bonjour,

Je n'ai peut-être pas tout saisie, mais en laissant inline le lien, un background size et une transition le font ?
http://codepen.io/gc-nomade/pen/grRmBw

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ante risus, maximus in consectetur nec, pellentesque quis diam. Etiam vel feugiat enim. <a href="">Etiam ultrices id dolor vitae accumsan. Nullam at semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.</a> Sed pulvinar nulla et facilisis varius. Pellentesque habitant morbi tristique senectus et netus et mal</p>


a {
  text-decoration:none;
  background:linear-gradient(to left,red , red) bottom center  no-repeat;
  transition:0.5s;
  background-size:0% 3px;    
  }
  
  a:hover {
  background-size:100% 3px;
}
p {
  width:15em;/* demo pour casser le lien sur plusieurs lignes */
}
Purée o_O c'est très séduisant...
J'ai un peu peur des effets de bord pour l'utiliser en clientèle, mais je vais y réfléchir...
Merci pour le partage en tout cas Smiley smile
Edit :
Non en fait, j'adopte, c'est trop d'la ballouse atomique ^^
Avé les vraies couleurs et le style j'pense que ça va bien le faire.

Merci beaucoup.
Bonsoir,

Je me demandais s'il était possible d'agir sur ce code pour avoir une arrivée à gauche et un départ à droite du souligné. Je n'y arrive pas avec juste un gradient qui est seul me permettant de rester inline, j'y arrive seulement avec des pseudos éléments (un before qui débarque un after qui s'en va) mais ça me fout en l'air l'effet sur plusieurs lignes...
Et ouais, c'est pas trop compliqué sur le coup...! gcyrillus a fait le plus gros du job.

En fait au lieu de centrer ton background tu le cales à gauche et ensuite tu modifies le dégradé comme sur ce fork de pen de gcyrillus.

C'est vrai que l'effet est sympa.
Salut,
Non en fait l'idée c'est que le souligné arrive de la gauche comme sur le fork, mais qu'il reparte en transparence de la gauche vers la droite aussi.
Ok, là je ne vois pas trop à part utiliser du JS (et encore il faudrait se pencher sur la question).
Exactement. Je demandais juste au cas où gcyrillus passe dans le coin et ait une idée en relation avec sa première et très belle solution mais je demande peut-être beaucoup encore une fois. Smiley smile
Pour l'instant j'ai mes pseudos et sur 2 lignes ben ça ne fait qu'un souligné mais tânnnpiiiî
Modérateur
l'idée serait de partir sur un switch du background-position et de faire l'animation sur background-size à partir d'une image ou une couleur unique comme début de piste: http://codepen.io/gcyrillus/pen/yOzrxM Smiley cligne 

a {
  text-decoration: none;
  background: linear-gradient(to left, blue, blue) bottom right no-repeat;
  /* tune color's value and numbers of'em */
  transition: background-size 1s linear;
  background-size: 0% 3px;
}

a:hover {
  background: linear-gradient(to left, blue, blue) bottom left no-repeat;
  background-size: 100% 3px;
  /* tune this : XXwidth   XXheight */
}

Modifié par gcyrillus (03 Apr 2016 - 22:42)
Purée c'est magnifique o_O
Y'en a, s'ils n'existaient pas, faudrait les inventer ^^

Merci beaucoup, j'm'en vais étudier ça à la loupe Smiley smile
Sujet clos
Aller à