<!-- 背景色のみ -->
<p>
  <span class="background-text">
    タグを増やさずに、<br>
    行ごとに色をつける。
  </span>
</p>

<!-- box-shadowで四角が重なっているように -->
<p>
  <span class="background-text background-text_decoration">
    タグを増やさずに、<br>
    行ごとに色をつける。
  </span>
</p>

<!-- borderあり -->
<p>
  <span class="background-text background-text_border">
    タグを増やさずに、<br>
    行ごとに色をつける。
  </span>
</p>

* {
  margin: 0;
  padding: 0;
}

/* 共通・背景色のみ */
.background-text {
  display: inline;
  font-size: 1.5rem;
  padding: 0.125em 0.25em 0;
  background: #fff;
  line-height: 2;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* box-shadowで四角が重なっているように */
.background-text_decoration {
  box-shadow: 3px 3px 0 #cdd1e6;
}

/* borderあり */
.background-text_border {
  border: 2px solid #cdd1e6;
}

body {
  background: #2e396e;
  padding: 5vh 5%;
}

p:not(:first-child) {
  margin-top: 2rem;
}

.layout {
  width: 90%;
  margin: 0 auto;
}