サイトのコーディング中にはまったところ

ハマリスト

1. タイトルにマーカーを引こうとした

上記のようなタイトルの下半分にtext-decoration: underline;でマーカーを引こうとして詰まった。

.title--underline {
    text-decoration: underline;
    text-decoration-color: yellow;
    text-decoration-thickness: 15px;
    text-underline-offset: -5px;
}

safariのpcで確認すると、マーカーがテキストの前に出てきてしまっていた。
text-underline-offsetにマイナスの値を指定しているため、前後関係が怪しくなってしまったのではないかという仮説。

結局どうしたか
一行づつspanタグで囲って、それぞれにbackground-imageを指定した

.title--underline {
    line-height: 1.7;
    background-image: url(../images/marker-yellow.svg);
    background-repeat: repeat no-repeat;
    background-size: auto 15px;
    background-position: left 0 bottom 3px
}

最も良いコーディング方法が知りたい。

2. svgの画像がsafariで表示されない

またsafari
svgの画像を挿入したところ、safari(pc,スマホ両方)で豆腐になっていた。
調べてみたが原因は単にsafariがsvgの対応あんまりしていないからという結論ぽかった

結局どうしたか
svgではなく、pngで書き出した。
動きをつけるということもなく、かつ横幅指定を指定した画像であったため拡大・縮小でも崩れないというsvgの利点は特になくても良いと判断しpngにした