28111 sujets

CSS et mise en forme, CSS3

Bonjour,

Dans un nouveau site, on a décidé de barrer dans une navigation la page active. J'ai donc découvert la css text-decoration: line-through. Sauf que la barre horizontale est centré verticalement mais pas sur ma typo, et je ne vois pas comment corriger ça. J'ai essayé de jouer sur le line-height à 1em mais c pas ça.

Voici une image avec inspecteur. Le site est en cours de dév mais je vous l'ouvre un peu pour que vous testiez.
Page carliprod.com/projets-personnels/

Merci pour votre aide et bonne journée
Marine
Administrateur
Hello,

Effectivement, line-through se place mathématiquement au centre, en comptant hauteur de ligne mais aussi jambages etc.

Si tu veux avoir la main sur le positionnement, tu peux par exemple utiliser un dégradé linéaire sur tes span :


background: linear-gradient(#000, #000) no-repeat center 41px / 100% 3px


(ici la valeur verticale de 41px dépend de la taille de ton texte (30px) et de la hauteur de ligne, tu peux l'adapter. Et le 3px correspond à l'épaisseur du trait)
Modifié par Raphael (19 May 2019 - 11:36)
Meilleure solution