css - 行全体ではなく、テキストまでのみプロパティを適用します

Question

これが私のダミーテストです。

ここにHTMLのものがあります：

<h1> Header </h1>

CSSの内容は次のとおりです。

body {
 background: pink;
}

h1 {
 background-color: #454545;
}

Web ページは次のようにレンダリングされます。

                    

この画像でわかるように、プロパティを に適用しました<h1>が、線全体に効果があります。

私が欲しいのは、「ヘッダー」という単語までの灰色の背景です（背景色は単なる例です。これだけではありません）。

Answer 1

試す：

h1{
  display: inline-block;
}

Answer 2

h1 {
background-color: #454545;
display: inline-block;
}

編集：

遅く...@Scrimothyはすでに答えました。

Answer 3

見出しタグ内でスパンを使用できます。h1 span{...}次に、すべてのヘッダーを設定したり、これを処理するためだけにクラスを追加したりするのではなく、css セレクターとして使用できます。

ヘッダーを正常に動作させたい (そして幅全体に広げたい) サイトがありますが、テキストのすぐ後ろに背景も必要です。

body{
    background: pink;
}

h1{
    background-color: #454545;
}

h1 span{
    background-color: #454545;
}

<h1>Normal heading with a background</h1>
<p>I'm some content</p>
<h1 style="background-color: transparent"><span>Heading with my content in a &lt;span&gt;</span></h1>
<p>I'm some more content</p>