The :: after pseudo-element allows you to insert some content after the content of an element. The ::after pseudo-element is used in association with the content property to insert some content after the content of an element.
Now create a Web page named afterpe.html which shown the use of the ::after pseudo-element.
<!doctype html>
<head>
<style type="text/css">
body:after{
content:"The End";
display:block;
margin-top:2em;
text-align:center;
background-color:red;
color:white;
font-size:1em;
}
</style>
</head>
<body>
This is the example of the after pseudo-element.
</body>
</html>
The :: after pseudo-element inserts the content after the content in the Body element.
The output of the Web page is:
Now create a Web page named afterpe.html which shown the use of the ::after pseudo-element.
<!doctype html>
<head>
<style type="text/css">
body:after{
content:"The End";
display:block;
margin-top:2em;
text-align:center;
background-color:red;
color:white;
font-size:1em;
}
</style>
</head>
<body>
This is the example of the after pseudo-element.
</body>
</html>
The :: after pseudo-element inserts the content after the content in the Body element.
The output of the Web page is:
No comments:
Post a Comment