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 shows 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-element.
This is the example of the Before pseudo-element.
This is the example of the Before pseudo-element.
This is the example of the Before pseudo-element.
<P class="note">For this document 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-element.
This is the example of the Before pseudo-element.
This is the example of the Before pseudo-element.
This is the example of the Before pseudo-element.
<P class="note">For this document 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