CSSで行ではなくテキストの後ろにだけ背景色を敷きたい！

Update:

見出し周りでたまに見かけるんですが、行（幅100%）ではなく、テキストの後ろにだけ背景色を敷きたい場合、どうしたらいいのか？ HTMLは？ CSSは？ 調査してみました！
とちょっとふざけてスタートしましたが、改行が入った場合も崩れない方法を模索します。

その1：デフォルト（pタグにbackground-color指定）

普通の普通にpタグにbackground-colorを指定してみます。

<p class="text-background-test01">1行だけのテキスト</p>
<p class="text-background-test01">複数行のテキストの場合はどうかな？改行してもちゃんとなっていてほしいな？どうかな？</p>
.text-background-test01 {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.4em;
  padding: 5px;
  background:#FFD9D7;
}
Demo

1行だけのテキスト

複数行のテキストの場合はどうかな？改行してもちゃんとなっていてほしいな？どうかな？

Comment

デフォルトではpタグはblock要素なので、背景色も幅100%になりました。

その2：その1のpタグにdisplay:inline-block;の指定を追加

block要素じゃなくすればいいのでは？ 試してみます。

<p class="text-background-test02">1行だけのテキスト</p>
<p class="text-background-test02">複数行のテキストの場合はどうかな？改行してもちゃんとなっていてほしいな？どうかな？</p>
.text-background-test02 {
  display: inline-block;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.4em;
  padding: 5px;
  background:#FFD9D7;
}
Demo

1行だけのテキスト

複数行のテキストの場合はどうかな？改行してもちゃんとなっていてほしいな？どうかな？

Comment

1行だけならテキストの下のみに背景色が敷かれましたが、複数行の場合は幅100%になっています。

その3：pタグにfilterでdrop-shadow

filterでdrop-shadowかけてみたいのでかけてみます。

<p class="text-background-test03">1行だけのテキスト</p>
<p class="text-background-test03">複数行のテキストの場合はどうかな？改行してもちゃんとなっていてほしいな？どうかな？</p>
.text-background-test03 {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.4em;
  filter: drop-shadow(10px 10px 5px #FFD9D7);
}
Demo

1行だけのテキスト

複数行のテキストの場合はどうかな？改行してもちゃんとなっていてほしいな？どうかな？

Comment

これは……ぼかしですね。

その4：その3のdrop-shadowのボケをトル

ボケの設定を0にしてみましょう。

<p class="text-background-test04">1行だけのテキスト</p>
<p class="text-background-test04">複数行のテキストの場合はどうかな？改行してもちゃんとなっていてほしいな？どうかな？</p>
text-background-test04 {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.4em;
  filter: drop-shadow(2px 2px 0px #FFD9D7);
}
Demo

1行だけのテキスト

複数行のテキストの場合はどうかな？改行してもちゃんとなっていてほしいな？どうかな？

Comment

これは……ただのドロップシャドウですね。

その5：入れ子でspanにbackground-color指定

ここまでpタグのみで試していましたが、ここからspanタグを入れ子にしてCSSで調整していきます。
まずは入れ子にしたspanタグにbackground-colorを指定します。

<p class="text-background-test05"><span>1行だけのテキスト</span></p>
<p class="text-background-test05"><span>複数行のテキストの場合はどうかな？改行してもちゃんとなっていてほしいな？どうかな？</span></p>
.text-background-test05 {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.4em;
}
.text-background-test05 span {
  background: #FFD9D7;
  padding: 5px;
}
Demo

1行だけのテキスト

複数行のテキストの場合はどうかな？改行してもちゃんとなっていてほしいな？どうかな？

Comment

お！ 理想に近付いてきました!
しかし、改行時の右端がpadding効きませんね。塗りのpaddingが必要無い場合はこれで問題ないのですが。

その6：入れ子でspanにlinear-gradientをかける

強調したい箇所にマーカーを引いたような背景色を敷きたいときに便利なlinear-gradientを試してみましょう。全体を覆うようにすればいいのでは？

<p class="text-background-test06"><span>1行だけのテキスト</span></p>
<p class="text-background-test06"><span>複数行のテキストの場合はどうかな？改行してもちゃんとなっていてほしいな？どうかな？</span></p>
.text-background-test06 {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.4em;
}
.text-background-test06 span {
  background: linear-gradient(transparent 0%, #FFD9D7 0%);
  padding: 5px;
}
Demo

1行だけのテキスト

複数行のテキストの場合はどうかな？改行してもちゃんとなっていてほしいな？どうかな？

Comment

こちらもその5と同様、改行時の右端がpaddingが効いていません。
（その5と同様に、塗りのpaddingが必要無い場合はこれで問題ないでしょう）

その7：入れ子で単語ごとにspan区切りで疑似要素で背景色を敷く

レスポンシブ時、どのブラウザ幅でもきれいな位置で改行したい場合に使う、入れ子にしたspanタグをdisplay:inline-block;かける手。
それに擬似要素のposition:absolute;で背景色を敷いてみます。

<p class="text-background-test07"><span>1行だけの</span><span>テキスト</span></p><p class="text-background-test07"><span>複数行の</span><span>テキストの</span><span>場合は</span><span>どうかな？</span><span>改行しても</span><span>ちゃんと</span><span>なっていて</span><span>ほしいな？</span><span>どうかな？</span></p>
.text-background-test07 {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.4em;
}
.text-background-test07 > span {
  position: relative;
  display: inline-block;
}
.text-background-test07 > span::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: -5px;
  top: -5px;
  right: -5px;
  background-color: #FFD9D7;
  z-index: -1;
}
Demo

1行だけのテキスト

複数行のテキストの場合はどうかな？改行してもちゃんとなっていてほしいな？どうかな？

Comment

ブラウザ幅を伸び縮みさせてみてください。
スマホの方は横向きにすると改行部分が変更されるのが確認できると思います。
spanタグ区切りで改行されるので、単語の途中で改行されることがなくなります。そのためその5、その6のように改行時の右端がpaddingが効いてなくなる現象を回避することができます。

個人的にソースがシンプルじゃなくなるのが気になりますが、ここまでで理想に一番近いのはこれかな 🤔

その8：【最適解】box-decoration-breakを使う

IE11対応する必要がなくなり、堂々とbox-decoration-breakを使うことができるようになりました！

box-decoration-break - CSS: カスケーディングスタイルシート | MDN
box-decoration-break は CSS のプロパティで、要素の断片が複数の行、段、ページに渡る場合に描画する方法を指定します。

box-decoration-breakについて詳しくは上記サイトをご参照ください。border-radiusやbox-shadowにも対応できますね。

<div style="margin-bottom: 15px;">
  <p class="text-background-test08">1行だけのテキスト</p>
</div>
<div>
  <p class="text-background-test08">複数行のテキストの場合はどうかな？改行してもちゃんとなっていてほしいな？どうかな？</p>
</div>
.text-background-test08 {
  display: inline;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.4em;
  padding: 5px;
  background: linear-gradient(transparent 0%, #FFD9D7 0%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
Demo

1行だけのテキスト

複数行のテキストの場合はどうかな？改行してもちゃんとなっていてほしいな？どうかな？

pタグにdisplay: inline;を指定したことで、divタグを追加して段落を離しています。
その7のようにspanタグで区切りまくって煩雑になることもなくスッキリですね！

WEBあるあるですが、画面サイズによって変わるテキストの改行位置が、単語の途中などに入るのが気に食わない場合はspanで区切る方がよいかもしれません。ディレクター&デザイナー&コーダーで話し合いましょう（細かく画面サイズごとにチェックしてるデザイナーにあまり遭遇したことはないのですが。。そして細かい調整を求められた場合はコーダーは遠慮なく工数を加算して請求しましょう！）

関連記事: