CSS Content Property

In this chapter you will learn:
What is content property
Example of content property

CSS content property is one of the important properties which is used with pseudo-elements (:after and :before). It adds something new to the web page. You can also use this property to indicate a specific entry because if you use this property in your program and give the class name of the element which is the selector of content property then some extra values added after or before according to the pseudo element.

Example of content property:-
Example 1. content property with pseudo element :after 
<html>
<head>
<style type="text/css">
a:after
{
content: " (" attr(href) ")";
}
</style>
</head>
<body>
<a href="http://www.google.com">Google</a>
</body>
</html>

Guide:-
In the given program content property has used with the pseudo element :after so the href value will be added after Google(text).
Output:- example of content property with :after

Example 2. content property with pseudo element :before


<html>
<head>
<style type="text/css">
a:before
{
content: " (" attr(href) ")";
}
</style>
</head>
<body>
<a href="http://www.google.com">Google</a>
</body>
</html>

Guide:-
In the given program content property has used with a pseudo element: before so the href value will be added before Google(text).
Output:-
example of content property with :before Example 3. content property with pseudo element :before 
<html>
<head>
<style type ="text/css">
.address:before
 {
 content: "Address of employee:";
}
</style>
</head>
<body>
<p class="address">  United State </p>
</body>
</html>

Output- example 3 of content property with pseudo element :before

Summary

In this chapter, you have learned about the content property of CSS and its uses with examples so try it yourself to run the given program and also many programs of content property with the help of given examples. Click on Next button to continue-

 

Share your thought