Modifica lo spessore della linea dell'attributo CSS "sottolineato"

Dal momento che puoi sottolineare qualsiasi testo in CSS in questo modo:

H4 {text-decoration: underline;}

Come puoi modificare anche quella 'linea' che viene disegnata, il colore che ottieni sulla linea è facilmente specificato come 'colore: rosso' ma come si modifica l'altezza della linea, cioè lo spessore?

Ecco un modo per ottenere ciò:

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;
  }​

Ecco un esempio: http://jsfiddle.net/AQ9rL/

Recentemente ho avuto a che fare con FF che le sottolineature erano troppo spesse e troppo lontane dal testo in FF, e ho trovato un modo migliore per gestirle usando un paio di box-shadow:

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

La prima ombra viene posta sopra la seconda ed è così che puoi controllare la seconda variando il valore "px" di entrambe.

Plus: vari colori, spessori e posizione della sottolineatura

Meno: non può essere utilizzato su sfondi non solidi

Qui ho fatto un paio di esempi: http://jsfiddle.net/xsL6rktx/

Molto facile ... elemento "span" esterno con caratteri piccoli e sottolineato, e elemento "font" interno con caratteri di dimensioni maggiori.

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

Un altro modo per farlo è usare ": after" (pseudo-elemento) sull'elemento che vuoi sottolineare.

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;

}

Esiste text-decoration-thicknessattualmente parte del modulo di decorazione del testo CSS di livello 4 . È in fase di "Editor's Draft", quindi è un lavoro in corso e soggetto a modifiche. A partire da gennaio 2020, è supportato solo in Firefox e Safari .

La proprietà CSS text-decoration-thick imposta lo spessore, o larghezza, della linea di decorazione usata sul testo in un elemento, come una riga, una sottolineatura o una sovratensione.

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

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

C'è anche text-decoration-color, che fa parte del CSS Text Decoration Module Level 3 . Questo è più maturo (Raccomandazione candidata) ed è supportato nella maggior parte dei principali browser (le eccezioni sono Edge e IE). Ovviamente non può essere usato per alterare lo spessore della linea, ma può essere usato per ottenere una sottolineatura più "smorzata" (mostrata anche nel codice).

Farò qualcosa di semplice come:

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

• Puoi usare line-heighto padding-bottomper impostare la posizione tra di loro
• Puoi usare display: inlinein alcuni casi

Demo: http://jsfiddle.net/5580pqe8/

La background-imagepuò essere utilizzato anche per creare una sottolineatura.

Deve essere spostato verso il basso background-positione ripetuto orizzontalmente. La larghezza della linea può essere regolata in una certa misura utilizzando background-size(lo sfondo è limitato alla casella del contenuto dell'elemento).

.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>

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

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

Grazie alla magia delle nuove opzioni CSS questo è ora possibile in modo nativo:

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

Finora il supporto è relativamente scarso . Ma alla fine atterrerà in altri browser oltre a ff.

La mia soluzione: https://codepen.io/SOLESHOE/pen/QqJXYj

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

È possibile regolare la posizione della sottolineatura con il valore dell'altezza della linea, lo spessore della sottolineatura e lo stile con il bordo inferiore.

Fai attenzione a disabilitare il comportamento di sottolineatura predefinito se vuoi sottolineare un href.