How to add Background-Color for Text Width Instead of Entire Element Width using CSS ?

Last Updated : 23 Feb, 2023

In this article, we will see how to add background color for the text width instead of the entire element width using CSS.

The display: inline or display: inline-block property is used to set the background color of the text width.

Syntax:

display: inline;  
display: inline-block;

Approach: We will create an element and then apply the display: inline or display: inline-block property value to set the background color for the text width. The inline value is used to display an element as an inline element and the inline-block element is used to display an element as an inline-level block container.

Example 1: The following code demonstrates the above approach with display: inline-block property value.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>
        How to add Background-Color for
        Text Width Instead of Entire
        Element Width using CSS ?
    </title>

    <style>
        body {
            text-align: center;
        }
        h1 {
            color: green;
        }
        h2 {
            display: inline-block; 
            background-color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h3>
        How to add Background-Color for
        Text Width Instead<br> of Entire
        Element Width using CSS ?
    </h3>

    <h2>Web Technology</h2>
</body>

</html>

Output:

Example 2: The following code demonstrates the above approach with display: inline property value applied on the span elements.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>
        How to add Background-Color for
        Text Width Instead of Entire
        Element Width using CSS ?
    </title>

    <style>
        body {
            text-align: center;
        }
        h1 {
            color: green;
        }
        span {
            display: inline; 
            background-color: green;
            color: white;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h3>
        How to add Background-Color for
        Text Width Instead<br> of Entire
        Element Width using CSS ?
    </h3>

    <p>
        <span>Web Technology</span>
        <span>HTML</span>
        <span>CSS</span>
        <span>JavaScript</span>
    </p>
</body>

</html>

Output:

How to Set the background-color of different Elements in CSS?

vkash8574

Improve

Article Tags :

How to add Background-Color for Text Width Instead of Entire Element Width using CSS ?

Similar Reads

Thank You!

What kind of Experience do you want to share?