CSS में ::before और ::after स्यूडो-एलिमेंट्स

CSS ::before और ::after स्यूडो-एलिमेंट्स का उपयोग क्रमशः किसी एलिमेंट से पहले और बाद में कुछ सामग्री डालने के लिए किया जाता है।

उदाहरण

आइए CSS ::before और CSS ::after स्यूडो-एलिमेंट्स का एक उदाहरण देखें:

<!DOCTYPE html> <html> <head> <style> div:nth-of-type(1) p:nth-child(2)::after {    content: " BUZZINGA!";    background: orange;    padding: 5px; } div:nth-of-type(2) p:nth-child(2)::before {    content: "Harry:";    background-color: lightblue;    font-weight: bold;    padding: 5px; } </style> </head> <body> <div> <p>Nobody: </p> <p>Sheldon Cooper:</p> </div><hr><div> <p><q>Death Eaters arrive</q></p> <p><q>Expecto Patronum!</q></p> </div> </body> </html>

आउटपुट

यह निम्नलिखित आउटपुट देगा:

एक और उदाहरण

आइए CSS ::before और CSS ::after स्यूडो-एलिमेंट्स का एक और उदाहरण देखें:

<!DOCTYPE html> <html> <head> <title>Center Alignment using CSS Margin</title> <style> #yinyangSymbol {    width: 100px;    height: 50px;    background: #fff;    border-color: #000;    border-style: solid;    border-width: 2px 2px 50px 2px;    border-radius: 100%;    position: relative; } #yinyangSymbol::before {    content: "";    position: absolute;    top: 50%;    left: 0;    background: #fff;    border: 18px solid #000;    border-radius: 100%;    width: 14px;    height: 14px; } #yinyangSymbol::after {    content: "";    position: absolute;    top: 50%;    left: 50%;    background: #000;    border: 18px solid #fff;    border-radius:100%;    width: 14px;    height: 14px; } div{    width: 50%;    margin: 10px auto;    border:4px solid black; } #text {    border: 4px solid black;    background-color: grey;    color: white;    text-align: center; } </style> </head> <body> <div id="main"> <div> <div id="yinyangSymbol"></div> </div> <div id="text">Be Centered & Balanced</div> </div> </body> </html>

आउटपुट

यह निम्नलिखित आउटपुट देगा: