純粋な CSS を使用して背景色をテキストと同じ幅にするにはどうすればよいですか?

純粋な CSS を使用してテキスト幅の背景色を設定する

HTML 要素で背景色を操作する場合、色の幅をテキスト コンテンツに合わせて調整することができます。挑戦的であること。この質問は、背景色が要素の幅全体ではなく、テキストの後ろにのみ拡張されることを目的とした特定のシナリオについて詳しく説明します。

提供されたコード スニペットは、背景色が緑色に設定された h1 要素を使用しています。

h1 { 
    text-align: center; 
    background-color: green; 
}

このコードにより、ページの幅全体に広がり、テキストをはるかに超えて緑色の背景が表示されます。この問題を解決するには、 などのインライン要素内にテキストを埋め込むことを提案しています。 element:

<h1><span>The Last Will and Testament of Eric Jones</span></h1>

インライン要素は、

のようなブロックレベルの要素とは異なり、そのコンテンツに必要なスペースのみを占有します。 に背景色を適用することで、要素:

h1 span { 
    background-color: green; 
}

背景色はテキストの幅に制限され、目的の効果が作成されます。この手法により、背景色の範囲を正確に制御し、周囲の要素のレイアウトを乱すことなくテキスト コンテンツと確実に揃えることができます。

以上が純粋な CSS を使用して背景色をテキストと同じ幅にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。