CSSでマーカー風アンダーラインを引く方法

text-decorationのunderlineを使うことで、<strong>の文字にマーカーのようなunderlineを引ける。使うプロパティは以下の通り。

• text-decoration
  • <a>やリンクのようなunderlineのスタイルを指定するプロパティ
• text-underline-offset
  • underlineの位置を調整するプロパティ
• text-decoration-skip-ink
  • アルファベットのunderlineが途切れないようにするプロパティ

<p>吾輩は猫である。<strong>名前はまだない。</strong>どこで生れたか頓と見当がつかぬ。<strong>何でも薄暗いじめじめした所</strong>でニャーニャー泣いていた事だけは記憶している。</p>

strong {
  text-decoration: underline solid rgba(255, 255, 0, .5) 0.5em;
  text-underline-offset: -0.3em;
  text-decoration-skip-ink: none;
}

デモ