How to Create a Text-Width Background in CSS without Affecting the Entire Element?

Creating Text-Width Backgrounds in CSS without Element-Wide Color

Achieving a text-width background without extending it to the entire element can present a challenge in CSS. Here's how to resolve it:

Isolate Text in an Inline Element

As you're restricted from modifying the HTML, your solution lies in confining the text within an inline element, like a . By doing so, you limit the scope of the background color to the text itself.

Apply Background Color to Inline Element

Once the text is isolated in the , you can effortlessly apply the background color to the inline element. This ensures that the color remains confined to the text's boundaries.

Example Implementation

To illustrate this technique, consider the following revised code:

HTML:

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

CSS:

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

By wrapping the text in a and applying the background color to the span, you successfully create a text-width background without modifying the main element's width.

The above is the detailed content of How to Create a Text-Width Background in CSS without Affecting the Entire Element?. For more information, please follow other related articles on the PHP Chinese website!