Help us understand the problem. What is going on with this article?

【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%);
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away