<div>
  <h1 class="b-color">背景色ありタイトル</h1>
</div>

<div>
  <h1 class="deco">背景色ありタイトル</h1>
</div>

div {
  text-align: center;
}

.b-color {
  display: inline-block;
  padding: 5px;
  background-color: #BCC2F3;
	font-size: 16px;
}

.deco {
	position: relative;
  display: inline-block;
	font-size: 16px;
}

.deco::before {
	position: absolute;
	top: -5px;
	left: -5px;
  z-index: -1;
	width: calc(100% + 10px);
	height: calc(100% + 10px);
	background-color: #BCC2F3;
	content: '';
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.