An Introduction To CSS Content Property And CSS Word-spacing: With Easy-to-use Examples!

CSS Content Property And CSS Word-spacing

CSS Content Property

The CSS content property setting produces dynamic content. It substitutes the generated value for the element. It is compatible with the pseudo-elements::before and::after. All browsers fully support this CSS property, which is used to add the generated content to a website.

Property Values

As listed in the following table, this CSS property has a wide range of defined values:

ValuesDescription
NormalThe default value is established using it.
NoneThis value sets no content.
CounterThe content is designated as the counter. In most cases, it is a number. The counter() or counters() function is used to display it.
StringYou can set any string value with it. Quotation marks must always surround it.  Any string that comes before or after the HTML element is generated.
AttrThe specified attribute's value is inserted before or after the element. An empty string will be inserted if a certain attribute is missing from the selector.
Open-quoteThe opening quotation mark is inserted using it, or the content is set to be an opening quote, depending on the situation.
Close-quoteAlternatively, it causes the content to be a closing quote. It is used to insert the closing quotation mark.
No-close-quoteIf the closing quotations are specified, they are used to eliminate the closing quotation from the text.
No-open-quoteIf the opening quotations are specified, they are used to eliminate the quotation from the content.
UrlAn image, video, audio, or other media types can be set as content.
InitialIt is employed to return the property to its initial setting.
InheritIt gets the property from its original element.

Below are a few illustrations of this CSS property.

Example - Using Normal And None Values

To add the text "Welcome" before the paragraph elements in this example, we are using the ::before pseudo-element. Those paragraph elements that have the values normal and none applied won't have text added to them.

<!DOCTYPE html>   
<html>   
<head>   
    <title>   
        CSS content Property 
    </title>   
    <style>     
    body{  
    text-align: center;  
    }  
    p{  
    font-size: 25px;  
    }  
    p::before {    
            content: "Welcome ";   
        }   
            
        #para::before {    
            content: normal;   
        }   
        #para1::before {    
            content: none;   
        }  
        </style>   
</head>   
    
<body>   
    <h1> CSS content property example </h1>   
    <h2> The use of content: normal; and content: none; </h2>   
    <p> to the Techstack Revolution </p>   
    <p id = "para"> This is a sentence using <b>normal</b> value. </p>   
    <p id = "para1"> This is another sentence using <b>none</b> value. </p>      
    </body>   
</html>  

Example - Using String And Url Values

The content property and::before pseudo-element is used in this example to add the text "Hello World. Welcome."

<!DOCTYPE html>   
<html>   
<head>   
    <title>   
        CSS content Property   
    </title>   
    <style>     
    body{  
    text-align: center;  
    }  
    p{  
    font-size: 25px;  
    }  
    p::before {    
            content: "Hello World. Welcome ";   
        }   
            
        #para::before {    
            content: url("img.png");   
        }   
        #para1::before {    
            content: url("img.png");   
        }  
        </style>   
</head>   
    
<body>   
    <h1> CSS content property example </h1>   
    <h2> The use of content: string; and content: url(); </h2>   
    <p> to the Techstack Revolution </p>   
    <p id = "para"> This is a sentence using the <b>url()</b> value. </p>   
    <p id = "para1"> This is another sentence using the <b>url()</b> value. </p>     
    </body>   
</html>  

Example - Using Open-quote And Close-quote Value

Note that you cannot apply a close-quote without an open-quote.

<!DOCTYPE html>   
<html>   
<head>   
    <title>   
        CSS content Property   
    </title>   
    <style>   
    body{  
    text-align: center;  
    }  
    p{  
    font-size: 25px;  
    }  
        p::before {   
            content: open-quote;   
        }   
                p::after {   
            content: close-quote;   
        }   
    </style>   
</head>   
    
<body>   
    <h1> CSS content property example </h1>   
    <h2> The use of content: open-quote; and content: close-quote; </h2>   
    <p> Welcome to the Techstack Revolution </p>   
    <p> This is another sentence. </p>   
</body>   
</html>  

Example - Using No-open-quote And No-close-quote Values

In this example, the paragraph elements and paragraphs with style ".para" were formatted using the open-quote and close-quote formatting conventions.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body{  
text-align: center;  
}  
p{  
font-size: 25px;  
}  
p::before {  
  content: open-quote;  
}  
  
p::after {  
  content: close-quote;  
}  
  
p.para::before {  
  content: no-open-quote;  
}  
  
p.para::after {  
  content: no-close-quote;  
}  
</style>  
</head>  
<body>  
    <h1> CSS content property example </h1>   
    <h2> The use of content: no-open-quote; and content: no-close-quote; </h2>   
<p> Welcome to the Techstack Revolution </p>  
<p class="para"> This is another sentence </p>  
  
</body>  
</html>  

Example - Using attr()

We can insert a specific attribute's value using the attr() function.  In the absence of an attribute on the corresponding element, an empty string will be returned.

The attr() function was used to display the link on the screen in this example.

<!DOCTYPE html>   
<html>   
<head>   
    <title>   
        CSS content Property   
    </title>   
    <style>   
    body{  
    text-align: center;  
    }  
        a::after {   
            content: attr(href);   
        }   
    </style>   
</head>   
    
<body>  
<h1> CSS Content property example </h1>  
<h2> The link below is displayed by using the <b>attr()</b> </h2>  
    <a href= https://hubtolearn.com/>Click here!    
    </a>   
</body>   
</html> 

CSS Word-spacing

The space between the words is managed by this CSS property. This property allows us to alter the amount of white space between the words. Unlike the letter-spacing property, which specifies the distance between each character, this CSS property specifies the distance between each word in the text.

The word will be impossible to read if the word-spacing value is excessively negative or positive. Applying a very high positive value will result in words appearing as a collection of separate, unrelated words. A large negative value will cause the word's letters to overlap, rendering the word unrecognizable.

Property Values

Normal: The standard spacing between words is set to 0.25 em by default. It is used to define the space that the browser defines.

Length: The amount of extra space between the words is specified in length (in pt, px, em, cm, etc.). Negative values are supported.

Initial: It is employed to return the property to its initial setting.

Inherit: It receives the value from its original element.

Example 1

CSS Content Property And CSS Word-spacing

<!DOCTYPE html>   
<html>   
<head>   
    <title>   
      CSS word-spacing Property   
    </title>   
<style>  
body{  
text-align: center;  
}  
#space{  
word-spacing: 40px;   
}  
p{  
color: blue;    
font-weight: bold;   
font-size: 20px;  
}  
</style>  
</head>   
<body>   
    <h1>The Word-spacing Property Example</h1>   
    <div>  
    <h2>word-spacing: normal;</h2>   
    <p>   
       Welcome to the Techstack Revolution  
    </p>   
    </div>  
        <div>  
    <h2>word-spacing: 40px;</h2>   
    <p id= "space">   
       Welcome to the Techstack Revolution  
    </p>   
    </div>  
</body>   
</html>  

Example 2

<!DOCTYPE html>   
<html>   
<head>   
    <title>   
      CSS word-spacing Property   
    </title>   
<style>  
body{  
text-align: center;  
}  
#space{  
word-spacing: 2cm;   
}  
#space1{  
word-spacing: -50px;   
}  
#space2{  
word-spacing: initial;   
}  
p{  
color: blue;    
font-weight: bold;   
font-size: 20px;  
}  
</style>  
</head>   
<body>   
    <h1>The Word-spacing Property Example</h1>   
    <div>  
    <h2>word-spacing: 2cm;</h2>   
    <p id = "space">   
       Welcome to the Techstack Revolution
    </p>   
    </div>  
        <div>  
    <h2>word-spacing: -50px;</h2>   
    <p id= "space1">   
       Welcome to the Techstack Revolution  
    </p>   
    </div>  
        <div>  
    <h2>word-spacing: initial;</h2>   
    <p id= "space2">   
       Welcome to the Techstack Revolution  
    </p>   
    </div>  
    </body>   
</html>  

That's all about the CSS Content Property And CSS Word-spacing

To learn more about CSS, visit our CSS Tutorial Page.