pseudo class.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          @keyframes lal {
from { background-color: blue;
width: 100px;height: 50px;}
to{ background-color: crimson; 
width: 600px;
height: 300px;}
}

#lal{
    width: 100px;
height: 200px;
animation-color:red;
animation-name:lal ;
animation-duration: 5s;
animation-iteration-count: infinite;  
}

   
        h1{
            color: hotpink;
        }
        .ma:hover{
            color: navajowhite;

            font-size: 42px;
            background-color: black;
            width: 40%;
        }
         input:focus{
            color: red;
            font-weight: 700;
            font-size: 30px;           
         }

         p:nth-child(2n+1){
color: darkred;
background-color: black;
width: 80%;
         }
        h1::before{
            content: "Hello " ;
            background-color: blue;
            -webkit-flow-into: 50px;
        } 
        p::before{
            content: "tom" ;
        }
    </style>
</head>
<body>
    <h1>pseudo class</h1>
    <h1> normal class</h1>
    <h1>valo class</h1>
    <h1 class=" ma">vaolo</h1>
    <h2 class="ani">email</h2>
    <input name="email" type="text">
    <br>
    <h2>password</h2>
    <input name="password" type="text">
    <ul id="lal">
        <p> ami</p>
        <p>tumi</p>
        <p> ke se</p>
        <p> jni na to</p>
        <p> boka  manish</p>
        <p> ha ha ha ha!</p>
        <p> valo basi</p>
        <p>>valo</p>
    </ul>
    

</body>
</html>