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>