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 really select something on the page but adds something different to it. In simple way, 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, JavaScript cannot be used but there are also other methods 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 are the list of properties of the CSS content property:
- normal: It is default value and defines the content if content property is specified to 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 value of the specified attribute. If there is no attribute, then it returns 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, and so on.
- 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, url 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 in a webpage.
Examples of CSS content property
Given below are the examples mentioned:
Example #1
The following examples depicts 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 use of 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 initial property that sets property to the default value. This can be used with any CSS property along with any HTML element.
4.5 (8,758 ratings)
View Course
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 attr property that provides value of the HTML element attribute and (name) defines the string which matches the name of the attribute.
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 open-quote property that insert the specified string with the property quotes. When you set this property, it will generate 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 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 no-close-quote property that removes 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 counter property, where content will be the value of 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 to know 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
This is a guide to CSS content property. Here we discuss the introduction to CSS content property, how does this property works with programming examples respectively. You may also have a look at the following articles to learn more –
