How Can I Add a Colored Text Background Without Expanding Element Width?

Colored Text Background Without Affecting Entire Element Width

Sometimes, you may want to highlight specific text with a background color without affecting the width of the entire element. In this scenario, you cannot modify the HTML to add an inline element like a tag.

Solution:

The solution lies in leveraging the natural width of an inline element. By placing the text inside an inline element, such as a tag, the background color can be applied to that element specifically.

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

Once the text is placed in the inline element, apply the background color to the span using CSS:

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

This approach ensures that the background color only affects the text within the inline element, maintaining the desired effect without modifying the width of the entire h1 element.

The above is the detailed content of How Can I Add a Colored Text Background Without Expanding Element Width?. For more information, please follow other related articles on the PHP Chinese website!