web-dev-qa-db-fra.com

Contrôle la position de soulignement sur la décoration de texte: soulignement

Existe-t-il un moyen de contrôler la position du soulignement dans la décoration de texte: soulignement?

<a href="#">Example link</a>

L'exemple ci-dessus a un soulignement par défaut ... y a-t-il un moyen de déplacer ce soulignement de quelques pixels vers le bas pour qu'il y ait plus d'espace entre le texte et le soulignement?

cssunderline
42
redconservatory

La seule façon de le faire est d'utiliser une bordure au lieu d'un soulignement. Les soulignements sont notoirement inflexibles.

a {
    border-bottom: 1px solid currentColor; /* Or whatever color you want */
    text-decoration: none;
}

Voici une démo. Si ce n'est pas assez d'espace, vous pouvez facilement en ajouter plus - si c'est trop, c'est un peu moins pratique.

52
Ry-

Vous pouvez utiliser des pseudo avant et après comme ça. Il fonctionne bien et est entièrement personnalisable.

[~ # ~] css [~ # ~]

p {
  line-height: 1.6; 
}
.underline {
   text-decoration: none; 
   position: relative; 
 }   

.underline:after {
    position: absolute;
    height: 1px;
    margin: 0 auto;
    content: '';
    left: 0;
    right: 0;
    width: 90%;
    color: #000;
    background-color: red;
    left: 0;
    bottom: -3px; /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
}

[~ # ~] html [~ # ~]

<p>This is some example text. From this page, you can <a href="#">read more example text</a>, or you can <a href="#" class="underline">visit the bookshop</a> to read example text later.</p>


Voici une démo plus avancée avec une capture d'écran jointe que j'ai faite qui anime le soulignement sur en vol stationnaire, change de couleur, etc. ..

http://codepen.io/bootstrapped/details/yJqbPa/

underline css

16
Bryan Willis

Il existe la propriété text-underline-position Proposée dans CSS 3, mais il semble qu'elle n'ait encore été implémentée dans aucun navigateur.

Vous devrez donc utiliser la solution de contournement pour supprimer le soulignement et ajouter une bordure inférieure, comme suggéré dans d'autres réponses.

Notez que le soulignement n'ajoute pas à la hauteur totale d'un élément mais la bordure inférieure le fait. Dans certaines situations, vous pouvez utiliser à la place outline-bottom - qui n'ajoute pas à la hauteur totale (bien qu'il ne soit pas aussi largement pris en charge que border-bottom).

14
Jukka K. Korpela

En utilisant border-bottom-width et border-bottom-style donnera à la bordure la même couleur que le texte par défaut:

text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
padding-bottom: 1px;
2
Dorian

Il y a une propriété text-underline-position: under. Mais uniquement pris en charge dans Chrome et IE 10+).

Plus d'informations: https://css-tricks.com/almanac/properties/t/text-underline-position/https://developer.mozilla.org/en-US/ docs/Web/CSS/text-underline-position

2
Jinu Kurian

Utilisez une bordure inférieure au lieu du soulignement

a{    
    border-bottom: 1px solid #000;
    padding-bottom: 2px;
}

Changer le rembourrage en bas pour ajuster l'espace

2
Julien

J'utiliserais plutôt la bordure. Plus facile à contrôler.

0
mikevoermans