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:
| Values | Description |
| Normal | The default value is established using it. |
| None | This value sets no content. |
| Counter | The content is designated as the counter. In most cases, it is a number. The counter() or counters() function is used to display it. |
| String | You 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. |
| Attr | The 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-quote | The opening quotation mark is inserted using it, or the content is set to be an opening quote, depending on the situation. |
| Close-quote | Alternatively, it causes the content to be a closing quote. It is used to insert the closing quotation mark. |
| No-close-quote | If the closing quotations are specified, they are used to eliminate the closing quotation from the text. |
| No-open-quote | If the opening quotations are specified, they are used to eliminate the quotation from the content. |
| Url | An image, video, audio, or other media types can be set as content. |
| Initial | It is employed to return the property to its initial setting. |
| Inherit | It 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.
