Underline avec un display:inline-block

Un petit bug de rendu sur lequel je n’étais pas encore tombé, un lien comprenant 2 span avec leur contenu mais légèrement séparé par un witdth et un display:inline-block; pour facilité la lecture, cependant  au survol du lien, plus de soulignement.

Mais quand je place un text-decoration:inherit; sur les span contenue dans le lien et le underline reviens !

Avec l’exemple si dessous, le premier li n’a pas de underline au survol, mais sur la 2ème, on a defini le span le survol apparait correctement.

See the Pen Underline & display:inline-block by Willemart (@AWillemart) on CodePen.

 

Alexandre

Depuis la fin de mes études à l’HEAJ, mes quelques expériences m’ont rapidement dirigé vers l’intégration web, qui consiste la plupart du temps à faire des découpes de design Photoshop, de wireframe ou encore de simples idées. J’essaye de garder un esprit de conseil et de guide pour une bonne approche ergonomique et user-friendly afin de satisfaire au mieux l’utilisateur final.

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.