[SCSS]CSSの波線をIE・Edgeにも対応させるブラウザハックとMixin

CSSの text-decoration:underline wavy; で波線を引けるようになりましたが、IEとEdgeはサポートしていないため、CSSグラデーションで波線を再現させたブラウザハックです。
Scssのmixinにまとめたので、設定しておけば一行の指定で text-decoration:underline wavy; を各ブラウザで使えます。

ブラウザの表示例

Chrome（対応ブラウザ）

text-decoration: underline wavy #8A65FE; が適用されています。

IE

background で波線を再現しています。

コード

Mixin

@mixin wavy-underline-style($underline-color:currentColor) {
  display: inline;
  padding-bottom: .15em;
  background:
  radial-gradient(circle at top,
    rgba(255,255,255,0) .1em,
    $underline-color .1em,
    $underline-color .15em,
    rgba(255,255,255,0) .15em
    ),

  radial-gradient(circle at bottom,
    rgba(255,255,255,0) .1em,
    $underline-color .1em,
    $underline-color .15em,
    rgba(255,255,255,0) .15em
    ),
  ;
  background-position: 0 1em, .25em 1.05em;
  background-size: .5em 1.15em;
  background-repeat: repeat;
}

@mixin wavy-underline($underline-color:currentColor) {
  text-decoration: underline wavy $underline-color;

  @at-root _:-ms-lang(x)::backdrop, & {
    /* Edge */
    @include wavy-underline-style($underline-color);
  }

  @at-root _:lang(x)::-ms-backdrop, & {
    /* IE11 */
    @include wavy-underline-style($underline-color);
  }
}

使い方

インライン要素に波線用classを割り当てます。

 <span class="wave">Lorem ipsum dolor sit amet...</span>

Scssの指定方法は以下の通りです。

.wave {
  @include wavy-underline(#8A65FE); // 波線の色を指定。指定がなければ文字色。
}

アウトプットされたCSS

.wave {
  text-decoration: underline wavy #8A65FE;
}

_:-ms-lang(x)::backdrop, .wave {
  /* Edge */
  display: inline;
  padding-bottom: .15em;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0) 0.1em, #8A65FE 0.1em, #8A65FE 0.15em, rgba(255, 255, 255, 0) 0.15em), radial-gradient(circle at bottom, rgba(255, 255, 255, 0) 0.1em, #8A65FE 0.1em, #8A65FE 0.15em, rgba(255, 255, 255, 0) 0.15em);
  background-position: 0 1em, .25em 1.05em;
  background-size: .5em 1.15em;
  background-repeat: repeat;
}

_:lang(x)::-ms-backdrop, .wave {
  /* IE11 */
  display: inline;
  padding-bottom: .15em;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0) 0.1em, #8A65FE 0.1em, #8A65FE 0.15em, rgba(255, 255, 255, 0) 0.15em), radial-gradient(circle at bottom, rgba(255, 255, 255, 0) 0.1em, #8A65FE 0.1em, #8A65FE 0.15em, rgba(255, 255, 255, 0) 0.15em);
  background-position: 0 1em, .25em 1.05em;
  background-size: .5em 1.15em;
  background-repeat: repeat;
}

以上になります。

CSSグラデーションを使ったブラウザハックですが、波線のデフォルトスタイルを使いたくない場合にもお好みの下線にアレンジできます。

参考になりましたら幸いです。

---

▼IEとEdgeのブラウザハックは下記を参考にしました。ありがとうございます。
css hacks 2019 ( IE11 / Edge / Chrome / Safari / Firefox )

▼text-decoration-style
https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration-style