テキスト下線を波線にする方法

注目して欲しいテキスト部分の下線部を波線にする方法です。
クラスをPタグでもSPANでもどちらにつけても大丈夫です。

HTML
1
<p>ここが<span class="wavy">注目ポイント</span>です。</p>
CSS
1
2
3
4
.wavy {
    -webkit-text-decoration: underline wavy red;
    text-decoration: underline wavy red;
}

mixinの場合

CSS
1
2
3
4
@mixin wavy($color:$colRed) {
    -webkit-text-decoration: underline wavy $color;
    text-decoration: underline wavy $color;
}