CSSで太字の波線を作る

CSSだけでも太字の波線を表現することが可能です。波線を表現したい場合text-decoration-style: wavy;を使用します。そして波線の太さを調整したい場合text-decoration: 2px;と設定します。

サンプルコード

<p>Sample : Text</p>

p{
    text-decoration: 2px;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: cornflowerblue;
    text-underline-offset:.5em;
}

また上記のコードを省略することも可能。

p{
    text-decoration:2px underline wavy cornflowerblue;
    text-underline-offset:.5em;
}

text-underline-offsetとは

text-underline-offsetとは下線の位置を調整するプロパティになります。underline以外のプロパティには効果はありません。正の値はもちろん、負の値も使用することも可能です（正直使いどころがわかりません）。