<!-- 背景色のみ -->
<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;
}