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-

More Articles

 

Share your thought



PLEASE DISABLE ADBLOCKER AND SUPPORT US!

Please support us by enabling ads on this page. Refresh

YOU DON'T LIKE ADS, WE ALSO DON'T LIKE ADS!
 
But we have to show ads on our site to keep it free and updated. We have to pay huge server costs, domain costs, CDN Costs, Developer Costs, Electricity and Internet Bill. Your little contribution will encourage us to regularly update this site.