HTML マーカーがSPでズレが生じてしまう

Question

前提・実現したいこと

初心者です。
HTMLでマーカーをひいた文章についてPC版だと特に問題ないのですがSPで確認すると
マーカーをひく位置・文章ともに崩れてしまいます。
マーカーをひいた際に以下のエラが発生しました。

発生している問題・エラーメッセージ

PC版だと意図どおりに表示されるのですが、SP版だと囲った●●－－－▲▲の「▲」以降にマーカーがひかれ、
コード前の～～の部分の文字が▲の前に挿入される現象が生じてしまいます。

該当のソースコード

～～～～<span style="background: linear-gradient(transparent 70%, #ffff7f 0%);">●●－－－▲▲</span>

試したこと

色の変更、改行の挿入、spanでなくstrongコードで試しましたが解消されませんでした…

Answer 1

私も初心者なもので、浅学ながら、何かお力になれれば、なのですが、

インラインスタイルではなく、CSSファイルに、書いてみてはどうでしょうか。
こんな感じで、
↓クラス名をちゃんとつけて、

<span class="marker_pink">強調したい文字</span>

.marker_pink {
background: linear-gradient(transparent 60%, #ff66ff 60%);
}

指定してみると、スマホでも、PCでも、関係なく、引かれると思います。

その前後にも、spanがあったとして、インラインに直接書く、というのは、私は怖くて出来ない…かなと思います。