Hi dear welcome to "CodePrime" Blog . In this post we are going to learn How to use Pseudo Class ( Identifier, Layer,Before and After, Numbering ) | CSS Tutorial | BY Codeprime. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the index.html file with your browser.
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pasudo class by codeprime </title>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam, vitae. </p>
<button>Codeprime-1</button>
<button>Codeprime-1</button>
<button>Codeprime-1</button>
<button>Codeprime-1</button>
</body>
</html>
CSS CODE
/* BEFORE AND AFTER */
p::before{
content: "Start";
background-color: red;
color: #fff;
padding: 3px;
margin: auto 4px;
border-radius: 4px;
}
p::after{
content: "end";
background-color: greenyellow;
color: #fff;
padding: 3px;
margin: auto 4px;
border-radius: 4px;
}
p{
padding: 10px;
background: #fff;
width: 80%;
}
/* BEFORE-AFTER LAYER */
/* button::before{
position: absolute;
content: "CodePrime-layer";
background-color: red !important;
width: 100px;
height: 20px;
padding: 10px 20px; } */
/* NUMBERING */
button:last-of-type{
padding: 10px 20px;
font-size: 2rem;
margin: 10px 0;
background: red !important;
color: #fff;
}
button:nth-child(2){
padding: 10px 20px;
font-size: 2rem;
margin: 10px 0;
background: red !important;
color: #fff;
}
button{
padding: 10px 20px;
font-size: 2rem;
margin: 10px 0;
}
body{
display: flex;
flex-direction: column;
justify-content: center;
background:linear-gradient(45deg,blue,white);
width: 100%;
min-height: 100vh;
align-items: center;
justify-content: center;
text-align: center;
}
 | CSS Tutorial | BY Codeprime){kind=link}
0 Comments