[CSS]SVG画像を使って波線を表現する

こんな感じで文章の好きな部分に波線を表現します。

CSSで波線を表現したい場合「text-decoration-style: wavy;」というプロパティが用意されていますが、波線の形などを調整することができません。
そこで今回は波線をSVG画像で作成し、CSSで表示する方法です。

波線画像の作成
HTML
CSS

波線画像の作成

イラストレーターなどで以下の様な左右がループする波線を作成します。

wavy ダウンロード

（当サイトのポリシーに則ってご利用ください。）

HTML

波線を入れたい部分を<span class="wavy">特定の要素で</span>囲みます。

波線を入れたい部分を特定の要素で囲みます。

CSS

.wavy {
    display: inline-block;
    position: relative;
    padding-bottom: 2px;
}

.wavy::before {
    content: "";
    background-image: url('wavy.svg');
    background-repeat: repeat-x;
    background-size: contain;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 5px;
    width: 100%;
}

padding-bottom: 2px;

波線部分の幅を適宜調整。

background-image: url('wavy.svg');

作成したSVG画像のURLを入力。

height: 5px;

波線のサイズを変更できます。

heightを大きくすれば波が大きく

heightを小さくすれば波が小さく