1.Create a Pseudo Classes Html Page Using Css
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
</style>
</head>
<body>
<div>Hover over me to show the p element
<p>Tada! Here I am!</p>
</div>
</body>
</html>
2.Create a Pseudo Elements Html Page Using Css
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
p::first-letter{
color:green;
font-size: xx-large;
}
</style>
</head>
<body>
<h2>Pseudo elements</h2>
<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>
</body>
</html>