En utilisant le CSS, lorsque le texte a text-decoration:underline appliqué, est-il possible d'augmenter la distance entre le texte et le soulignement ?
Non, mais tu pourrais faire quelque chose comme border-bottom: 1px solid #000 y padding-bottom: 3px .
Si vous souhaitez que la couleur du "soulignement" (qui, dans mon exemple, est une bordure) soit la même, il vous suffit d'omettre la déclaration de couleur. border-bottom-width: 1px y border-bottom-style: solid .
Pour les textes multilignes, vous pouvez envelopper vos textes multilignes dans un span à l'intérieur de l'élément. Par exemple <a href="#"><span>insert multiline texts here</span></a> il suffit alors d'ajouter border-bottom y padding sur le <span> - Démo
Le seul problème avec cette astuce est que lorsque j'utilise une hauteur de ligne égale à la hauteur de la division et que j'aligne verticalement : milieu ; pour la centrer, je ne peux pas utiliser cette astuce car le soulignement se retrouve alors sous la division.
@deweydb : Et si vous ajoutiez aussi le padding-bottom à la div du conteneur ? jsfiddle.net/dYfjc/1
+1 Je ne savais pas qu'il était possible de ne pas utiliser la propriété color pour hériter de la couleur de la police - cela m'épargnera beaucoup de sueur et de larmes à l'avenir !
Mise à jour 2021 : text-underline-offset fonctionne désormais dans presque tous les principaux navigateurs et dans les versions les plus récentes (IE11 n'est pas disponible) : https://caniuse.com/?search=text-underline-offset
Mise à jour 2019 : Le groupe de travail CSS a publié un projet pour décoration de texte niveau 4 qui ajouterait une nouvelle propriété text-underline-offset (ainsi que text-decoration-thickness ) pour permettre de contrôler l'emplacement exact d'un soulignement. À l'heure où nous écrivons ces lignes, il s'agit d'une version préliminaire qui n'a été mise en œuvre par aucun navigateur, mais il semble qu'elle finira par rendre la technique ci-dessous obsolète.
Réponse originale ci-dessous.
Le problème de l'utilisation de border-bottom directement est que même avec padding-bottom: 0 le soulignement a tendance à être trop fort loin du texte pour avoir l'air bien. Nous n'avons donc pas encore un contrôle total.
Une solution qui vous permet d'avoir une précision au pixel près est d'utiliser la fonction :after pseudo-élément :
a {
text-decoration: none;
position: relative;
}
a:after {
content: '';
width: 100%;
position: absolute;
left: 0;
bottom: 1px;
border-width: 0 0 1px;
border-style: solid;
}En modifiant le bottom (les nombres négatifs sont acceptés), vous pouvez positionner le soulignement exactement où vous le souhaitez.
Un des problèmes de cette technique dont il faut se méfier est qu'elle se comporte un peu bizarrement avec les retours à la ligne.
Cela ne fonctionnera pas pour mon problème particulier, mais c'est une astuce fantastique. +1
C'est une bonne solution, mais elle ne fonctionnera pas pour les ancrages qui couvrent plusieurs lignes.
@last-child Cette option est meilleure que le soulignement, mais avec le retour à la ligne, elle ne fonctionnerait pas pour chaque ligne.
Vous pouvez utiliser ce text-underline-position: under
Voir ici pour plus de détails : https://css-tricks.com/almanac/properties/t/text-underline-position/
Voir aussi compatibilité des navigateurs .
Merci ! Si vous essayez de faire un soulignement en pointillés et voyez qu'il est dessiné sans espace entre le bas du texte et la ligne, alors ceci résout le problème.
C'est la réponse correcte pour les navigateurs modernes, sans aucune solution de contournement.
Cela ne fonctionne pas dans Firefox, pas même avec le préfixe du fournisseur, mais c'est dans une spécification du W3C : w3.org/TR/css-text-decor-3/#text-underline-position-property . Autre ressource pertinente : quackit.com/css3/properties/css_text-underline-position.cfm
Bienvenue sur Stack Overflow. Les réponses ne contenant que du code sont déconseillées sur Stack Overflow car elles n'expliquent pas comment le problème est résolu. Veuillez modifier votre réponse pour expliquer ce que fait ce code et comment il améliore les nombreuses autres réponses validées à cette question, afin qu'elle soit utile aux autres utilisateurs ayant des problèmes similaires.
Il est important de noter que text-underline-position n'est pas supporté sous Firefox selon developer.mozilla.org/fr/US/docs/Web/CSS/
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
2 votes
Ce n'est pas exactement ce que vous demandiez, mais c'était une lecture intéressante sur le sujet : CSS Design : Soulignements personnalisés
0 votes
La distance est déterminée par la police utilisée. Essayez des polices sûres pour le web.
5 votes
CSS3 propose aujourd'hui un grand nombre de nouvelles propriétés de décoration du texte. Veuillez consulter le site alligator.io/css/text-decoration Exemple :
text-underline-position: under;ytext-decoration-skip: ink;Veuillez noter que cette solution n'est probablement pas rétrocompatible avec les anciens navigateurs.2 votes
Un autre bonne solution
6 votes
Vote pour
text-underline-offsetici : bugs.chromium.org/p/chromium/issues/