CSSの「下線」属性の線の太さを編集する

次のようにCSSでテキストに下線を引くことができるので：

H4 {text-decoration: underline;}

次に、描画された「線」を編集するにはどうすればよいですか。線に表示される色は「色：赤」として簡単に指定できますが、線の高さ、つまり太さを編集するにはどうすればよいですか。

これを実現する1つの方法を次に示します。

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

次に例を示します。http：//jsfiddle.net/AQ9rL/

最近私は、下線が太すぎてFFのテキストから離れすぎているFFを処理する必要があり、ボックスシャドウのペアを使用してそれを処理するより良い方法を見つけました。

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

最初の影は2番目の影の上に配置されます。これにより、両方の「px」値を変化させることで2番目の影を制御できます。

プラス：さまざまな色、太さ、下線の位置

マイナス：固体でない背景には使用できません

ここで私はいくつかの例を作りました：http : //jsfiddle.net/xsL6rktx/

非常に簡単です。小さいフォントと下線を含む「span」要素の外側、および大きいフォントサイズを含む「font」要素の内側。

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

これを行う別の方法は、下線を引く要素に "：after"（疑似要素）を使用することです。

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;

}

ありtext-decoration-thicknessの一部は現在、CSSテキスト装飾モジュールレベル4。これは「編集者の下書き」段階にあるため、進行中の作業であり、変更される可能性があります。2020年1月の時点で、FirefoxとSafariでのみサポートされています。

text-decoration-thickness CSSプロパティは、線、下線、上線などの要素内のテキストで使用される装飾線の太さ、つまり幅を設定します。

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

Codepen：https ://codepen.io/mrotaru/pen/yLyLOgr （Firefoxのみ）

CSSテキスト装飾モジュールレベル3のtext-decoration-color一部であるもあります。これはより成熟しており（Candidate Recommendation）、ほとんどの主要なブラウザでサポートされています（例外はEdgeとIEです）。もちろん、線の太さを変更するために使用することはできませんが、より「ミュートされた」下線を実現するために使用できます（コードペンにも表示されます）。

私は次のような簡単なことをします：

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

• line-heightまたはpadding-bottomを使用して、それらの間の位置を設定できます。
• display: inline場合によっては使用できます

デモ： http : //jsfiddle.net/5580pqe8/

はbackground-image、下線の作成にも使用できます。

それを介して下にシフトしbackground-position、水平方向に繰り返す必要があります。線の幅はある程度調整できますbackground-size（背景は要素のコンテンツボックスに限定されます）。

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

最終的な解決策：http : //codepen.io/vikrant-icd/pen/gwNqoM

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

新しいcssオプションの魔法のおかげで、これは現在ネイティブで可能です：

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

現在のところ、サポートは比較的貧弱です。しかし、最終的にはff以外のブラウザにも表示されるでしょう。

私の解決策：https： //codepen.io/SOLESHOE/pen/QqJXYj

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

下線の位置はline-heightの値で、下線の太さやスタイルはborder-bottomで調整できます。

hrefに下線を付ける場合は、デフォルトの下線動作を無効にするように注意してください。