Modifier l'épaisseur de ligne de l'attribut CSS 'souligné'

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

H4 {text-decoration: underline;}

Comment pouvez-vous également éditer cette «ligne» qui est dessinée, la couleur que vous obtenez sur la ligne est facilement spécifiée comme «couleur: rouge» mais comment éditer la hauteur de la ligne, c'est-à-dire l'épaisseur?

Voici un moyen d'y parvenir:

HTML:

<h4>This is a heading</h4>

<h4><u>This is another heading</u></h4>

CSS:

 u {
    text-decoration: none;
    border-bottom: 10px solid black;
  }​

Voici un exemple: http://jsfiddle.net/AQ9rL/

Récemment, j'ai dû faire face à FF dont les soulignements étaient trop épais et trop éloignés du texte dans FF, et j'ai trouvé un meilleur moyen de le gérer en utilisant une paire d'ombres rectangulaires:

.custom-underline{
    box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}

La première ombre est placée au-dessus de la seconde et c'est ainsi que vous pouvez contrôler la seconde en faisant varier la valeur «px» des deux.

Plus: différentes couleurs, épaisseur et position de soulignement

Moins: ne peut pas utiliser sur des arrière-plans non solides

Ici, j'ai fait quelques exemples: http://jsfiddle.net/xsL6rktx/

Très facile ... à l'extérieur de l'élément "span" avec une petite police et un soulignement, et à l'intérieur de l'élément "font" avec une plus grande taille de police.

<span style="font-size:1em;text-decoration:underline;">
 <span style="font-size:1.5em;">
   Text with big font size and thin underline
 </span>
</span>

Une autre façon de procéder consiste à utiliser ": after" (pseudo-élément) sur l'élément que vous souhaitez souligner.

h2{
  position:relative;
  display:inline-block;
  font-weight:700;
  font-family:arial,sans-serif;
  text-transform:uppercase;
  font-size:3em;
}
h2:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  background:#000;
  height:1px;

}

Il existe text-decoration-thicknessactuellement une partie du module de décoration de texte CSS niveau 4 . Il est au stade "Ébauche de l'éditeur" - c'est donc un travail en cours et sujet à changement. Depuis janvier 2020, il n'est pris en charge que dans Firefox et Safari .

La propriété CSS text-decoration-width définit l'épaisseur ou la largeur de la ligne de décoration utilisée sur le texte d'un élément, tel qu'un trait, un soulignement ou un surlignage.

a {
  text-decoration-thickness: 2px;
}

Codepen: https://codepen.io/mrotaru/pen/yLyLOgr (Firefox uniquement)

Il y a aussi text-decoration-color, qui fait partie du module de décoration de texte CSS niveau 3 . Ceci est plus mature (recommandation candidate) et est pris en charge dans la plupart des principaux navigateurs (les exceptions sont Edge et IE). Bien sûr, il ne peut pas être utilisé pour modifier l'épaisseur de la ligne, mais peut être utilisé pour obtenir un soulignement plus "muet" (également indiqué dans le codepen).

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-heightou padding-bottompour définir la possibilité entre eux
• Vous pouvez utiliser display: inlinedans certains cas

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

Le background-imagepeut également être utilisé pour créer un soulignement.

Il doit être déplacé vers le bas via background-positionet 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>

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>

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

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

Grâce à la magie des nouvelles options css, cela est désormais possible de manière native:

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

Pour l'instant, le soutien est relativement faible . Mais il finira par atterrir dans d'autres navigateurs que ff.

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

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

Vous pouvez ajuster la position du soulignement avec la valeur de la hauteur de ligne, l'épaisseur du soulignement et le style avec la bordure en bas.

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