Modifier l'épaisseur du trait de l'attribut CSS "underline".

Question

Puisque vous pouvez souligner n'importe quel texte en CSS comme ceci :

h4 {
  text-decoration: underline;
}

Comment pouvez-vous également modifier la "ligne" qui est dessinée ? La couleur que vous obtenez sur la ligne peut être facilement spécifiée comme suit color: red mais comment modifier la hauteur de la ligne, c'est-à-dire son épaisseur ?

Answer 1

Je vais faire quelque chose de simple comme :

.thickness-underline {
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid black;
  margin-bottom: -1px;
}

• Vous pouvez utiliser line-height ou padding-bottom pour fixer la position entre eux
• Vous pouvez utiliser display: inline dans certains cas

Démo : http://jsfiddle.net/5580pqe8/

Answer 2

El background-image peut également être utilisé pour créer un soulignement. Cette méthode gère les sauts de ligne.

Il doit être déplacé vers le bas via background-position et répété horizontalement. La largeur de la ligne peut être ajustée dans une certaine mesure en utilisant background-size (l'arrière-plan est limité à la zone de contenu de l'élément).

.underline
{
    --color: green;
    font-size: 40px;
    background-image: linear-gradient(var(--color) 0%, var(--color) 100%);
    background-repeat: repeat-x;
    background-position: 0 1.05em;
    background-size: 2px 5px;
}

<span class="underline">
     Underlined<br/>
     Text
</span>

Answer 3

a {
  text-decoration: none;
  position: relative;
}

a.underline {
  text-decoration: underline;
}

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

<h1><a href="#" class="underline">Default: some text alpha gamma<br>the quick brown fox</a></h1>
<p>Working:</p>
<h1><a href="#" class="shadow">Using Shadow: some text alpha gamma<br>the quick brown fox<br>even works with<br>multiple lines</a></h1>
<br>

La solution finale : http://codepen.io/vikrant-icd/pen/gwNqoM

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

Answer 4

Grâce à la magie des nouvelles options css cela est désormais possible en mode natif :

a {
  text-decoration: underline;
  text-decoration-thickness: 5px;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
}

Pour l'instant, le soutien est relativement pauvre . Mais ça finira par arriver dans d'autres navigateurs que ff.

Answer 5

Ma solution : https://codepen.io/SOLESHOE/pen/QqJXYj

{
    display: inline-block;
    border-bottom: 1px solid;
    padding-bottom: 0;
    line-height: 70%;
}

Vous pouvez régler la position du soulignement avec la valeur line-height, l'épaisseur et le style du soulignement avec border-bottom.

Attention à désactiver le comportement de soulignement par défaut si vous voulez souligner un href.