Updated June 16, 2023
Introduction to CSS content property
The following article provides an outline for CSS content property. The content property will be used for::before and::after pseudo-elements to add the created content. It’s defined as a pseudo-selector (with colon), but that’s considered a pseudo-element as it doesn’t select something on the page but adds something different. This property can be used to alter the text inside an HTML tag. All modern browsers endorse CSS content with pseudo-elements:after/:before. The important thing here is that JavaScript cannot be used, but other methods exist to accomplish a certain result.
Syntax and properties:
Given below is the syntax for CSS content property:
content:normal|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;Given below is the list of properties of the CSS content property:
- normal: It is the default value and defines the content if the content property is specified as normal.
- counter: The created text has been the value of the name’s innermost counter which specifies that pseudo-element in scope.
- attr: It will be used to add the value of the specified attribute. If there is no attribute, then it returns an empty string.
- string: It helps to set the text to the content you define.
- open-quote: It helps to set an opening quote for the content.
- close-quote: It helps to set a closing quote for the content.
- no-open-quote: If specified, deletes the opening quote from the content.
- no-close-quote: If specified, deletes the closing quote from the content.
- url: It helps to set the content to a certain form of media such as picture, sound, video, etc.
- initial: This property is inheritable to its parent element.
- inherit: It defines the default property value.
How content property works in CSS?
Content property works in CSS in the following way:
- The property uses text, numbers, URLs, and many more to modify the content based on requirements inside the HTML page.
- It works with ::before and ::after pseudo-elements and can be used to add generated content to a webpage.
Examples of CSS content property
Given below are the examples mentioned:
Example #1
The following examples depicts the usage of CSS content properties.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS content property example </title>
<style>
p:before {
content: "Introduction: ";
display: inline;
}
</style>
</head>
<body>
<p> Welcome to EDUCBA... !!! It is an online learning model along with amazing 2500+ courses prepared by top-notch professionals. </p>
</body>
</html>Output:
The above example shows the string property, which sets content to a string and could be any text content.
Example #2
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS content property example </title>
<style>
p::before {
content: "Hello World... Welcome ";
}
a::before {
content: initial;
}
</style>
</head>
<body>
<p> to EDUCBA... </p>
<p id = "a"> you to the online learning model... </p>
</body>
</html>Output:
The above example uses the initial property that sets the property to the default value. You can use this with any CSS property in conjunction with any HTML element.
Example #3
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS content property example </title>
<style>
a::after {
content: attr(href);
}
</style>
</head>
<body>
<p> Welcome to EDUCBA... </p>
<a href= "https://www.educba.com/about-us/">
Click this link to visit website...
</a>
</body>
</html>Output:
The above example uses the attr property that provides the value of the HTML element attribute, and (name) defines the string that matches the attribute’s name.
Example #4
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS content property example </title>
<style>
p::before {
content: open-quote;
}
</style>
</head>
<body>
<p> Welcome to EDUCBA... </p>
</body>
</html>Output:
The above example uses the open-quote property, inserting the specified string with the property quotes. When you set this property, it will generate an opening quotation mark.
Example #5
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS content property example </title>
<style>
.myclass::after {
content: close-quote;
}
.myclass::before {
content: open-quote;
}
</style>
</head>
<body>
<p class="myclass"> Welcome to EDUCBA... </p>
</body>
</html>Output:
The above example uses open-quote and close-quote properties that insert the specified string with the property quotes. When you set these properties, they will generate opening and closing quotation marks.
Example #6
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS content property example </title>
<style>
.myclass::before {
content: open-quote;
}
.myclass::before {
content: no-open-quote;
}
</style>
</head>
<body>
<p class="myclass"> Welcome to EDUCBA... </p>
</body>
</html>Output:
The above example uses the no-open-quote property that removes the opening quotation mark from the specified element.
Example #7
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS content property example </title>
<style>
.myclass::before {
content: open-quote;
}
.myclass::after {
content: no-close-quote;
}
</style>
</head>
<body>
<p class="myclass"> Welcome to EDUCBA... </p>
</body>
</html>Output:
The above example uses the no-close-quote property, removing the closing quotation mark from the specified element.
Example #8
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS content property example </title>
<style>
.players {
counter-increment: IndexValue;
}
.players::before {
content: counter(IndexValue) " > ";
}
</style>
</head>
<body>
<h2> Indian Cricket Player Names: </h2>
<p class="players"> Virat Kohli </p>
<p class="players"> MS Dhoni</p>
<p class="players"> Rohit Sharma </p>
<p class="players"> Shikar Dhawan </p>
</body>
</html>Output:
The above example uses the counter property, where content will be the value of the named counter and display the values in the number ordered by incrementing each value.
Conclusion
So far, we have seen CSS content property which has assisted you in knowing each of the values of the CSS content property well and how they can be utilized in numerous scenarios. It is termed a pseudo-element since it doesn’t usually select anything on the page but brings something new to that document.
Recommended Articles
We hope that this EDUCBA information on “CSS content property” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
