noqua
8/15/2019 - 1:06 PM

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

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

mixin-wavy-underline-browser-hack.scss
content_copyfile_download
/** Usage
.wave {
  @include wavy-underline(#ccc);
}
*/
@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);
  }
}