CSS ::Before ::After CSS ::Before ::After How we can use before after pseudo classes in css which very good for designing <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Css ::Before ::After</title> <style> h1{ position: relative; width: max-content; } h1::before { position: absolute; bottom: 0; left: 0; content: ""; background-color: rgb(6, 18, 28); width:0%; height: 2px; transition: .4s; } h1:hover::before { width:100%; } .hovess span { margin-bottom: 0 !important; position: relative; z-index: 1; display: inline-block; } .hovess { position: relative; width: max-content; padding: 10px; outline: none; border: none; color: #fff; background-color: rgb(13, 135, 95); } .hovess:hover { color: #000 } .hovess:after { content: ""; width: 0%; height: 100%; background-color: rgb(14, 249, 171); position: absolute; top: 0; left: 0; transition: all .5s ease; z-index: 0; } .hovess:hover:after { width: 100%; } .manibutton { padding: 5px; background-color: aqua; text-decoration: none; position: relative; } .manibutton span { position: relative; margin-bottom: 0 !important; z-index: 2; } .manibutton::after { content: ""; position: absolute; left: 0; top: 0; width: 0%; height: 100%; background-color: rgb(12, 75, 54); transition: .2s ease-in-out; } .manibutton:hover { color: #fff; } .manibutton:hover::after { width: 100%; } </style> </head> <body> <h1> My Heading</h1> <a href="" class="hovess"> <span >Submit</span></a> <a href="" class="manibutton"><span>Click ME</span></a> </body> </html>