CSSで複数行の見出しに余白つきの背景色をつける

更新日 : 2021.04.04

写真の上に見出しをのせると写真によってはテキストが読みにくくなることがあるので、テキストに背景色をつけて見やすくすることがあります。display: inlineで表現は可能でしたが、行ごとの余白がつけられないのでデザインによっては問題となることも。そこでbox-decoration-break: cloneを使用して余白調整ができるようにします。

デモとコード

Design is fun.
Design is difficult.

h2 {
	box-decoration-break: clone;	
	-webkit-box-decoration-break: clone;
	display: inline;
	padding: .3em;
	line-height: 2.5;
	background-color: #e3bf00;
}

box-decoration-breakで、ボックスが改行する時の表示を指定することができます。cloneで分割されたボックスごとに背景や余白、borderを指定できるようになります。

ブラウザ対応

CSSで複数行の見出しに余白つきの背景色をつけるブラウザ対応の画像Can I use…

Firefox以外のモダンブラウザはベンダープレフィックス-webkit-が必要です。
IEは対応していないので余白なしの背景色となります。対応させる場合にはPolyfillを使用します。