HTML / CSS

【CSS】テキストにだけ背景色

  
<div style="margin-bottom: 20px;">
  <p class="text-bg">テキスト1行。</p>
</div>
<div>
  <p class="text-bg">テキスト複数行。さてどうなっているか。ちゃんと開業されてパディングは効いているか。</p>
</div>

 

.text-bg {
  display: inline;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.2em;
  padding: 7px;
  background: linear-gradient(transparent 0%, #FFD9D7 0%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

 

※参考：https://ponsyon.com/archives/4623

RELATED POST