The ::before pseudo-element allows you to insert some content before any element. The ::before pseudo-element is used in association with the content property to insert content before an element. Now create a Web page named beforepe.html which shown the use of the ::before pseudo-element.
<!doctype html>
<head>
<style type="text/css">
p.note:before{content:"Note:"}
p.note {border: solid green;}
</style>
</head>
<body>
This is the example of the ::before Pseudo-Class
<p class="note">We are using google chrome browser </p>
<body>
</html>
The ::before pseudo-element inserts the content Note:, in a border before the content in the P element.
The output of the above Web page is:
<!doctype html>
<head>
<style type="text/css">
p.note:before{content:"Note:"}
p.note {border: solid green;}
</style>
</head>
<body>
This is the example of the ::before Pseudo-Class
<p class="note">We are using google chrome browser </p>
<body>
</html>
The ::before pseudo-element inserts the content Note:, in a border before the content in the P element.
The output of the above Web page is:
No comments:
Post a Comment