【CSS】インライン要素の行間を調整しながら、CSSでマーカーを引く #CSS

linear-gradient　を使って、マーカー風のCSSをつけることがよくあるのですが、インライン要素の場合、line-heightが効かずに戸惑うことがちょこちょこあったので、メモ。

親要素にline-heightを設定する

親要素に line-height を設定することで、小要素の line-height が設定できる様になります。

例：


<div class="parent">
  <p class="child">テキストテキストテキスト</p>
</div>


.parent {
  line-height: 1;
}

.parent .child {
  display: inline;
  line-height: 1.8; <- きく！
  background: linear-gradient(transparent 60%, #faaa1e 60%);
}