CSS स्यूडो-एलिमेंट
स्यूडो-क्लास स्थिति बदलने पर रूप बदलती है (:hover, :focus)। स्यूडो-एलिमेंट एक कदम आगे है: आप टेक्स्ट का एक हिस्सा स्टाइल कर सकते हैं, या असली सामग्री से पहले/बाद एक छोटा बॉक्स बना सकते हैं — दो कोलन (::) से, HTML में अतिरिक्त टैग के बिना।
स्यूडो-एलिमेंट का मतलब क्या?
स्यूडो-एलिमेंट वह शब्द है जो सिलेक्टर से :: से जुड़ता है। वह चीज़ चुनता है जो markup में पूरा तत्व नहीं: पहला अक्षर, पहली पंक्ति, या सामग्री से पहले/बाद जेनरेट बॉक्स। ::before और ::after के लिए अक्सर content चाहिए तभी कुछ दिखे।
चार आम स्यूडो-एलिमेंट
पहले इन्हीं से शुरू करें। पुराना एक-कोलन रूप (:before) कई ब्राउज़र में अभी चलता है, पर आधुनिक दो-कोलन लिखें।
📊 रोज़मर्रा की CSS स्यूडो-एलिमेंट
| स्यूडो-एलिमेंट | क्या स्टाइल करता है | उदाहरण |
|---|---|---|
::before |
तत्व की सामग्री से पहले बॉक्स | p::before |
::after |
तत्व की सामग्री के बाद बॉक्स | a::after |
::first-letter |
टेक्स्ट ब्लॉक का पहला अक्षर | p::first-letter |
::first-line |
टेक्स्ट ब्लॉक की पहली पंक्ति | p::first-line |
सामग्री से पहले — ::before और content
::before असली टेक्स्ट से पहले एक वर्चुअल बॉक्स बनाता है। लगभग हमेशा content लगाएँ — स्ट्रिंग, या खाली सजावटी बॉक्स के लिए ""।
पहले — खुलता उद्धरण चिह्न
css.quote::before {
content: "“";
color: #0f766e;
font-size: 1.5rem;
margin-right: 0.25rem;
}content न भूलें
बिना content कई ::before/::after नियम कुछ नहीं दिखाते। रंगीन पट्टी या बैकग्राउंड आइकन के लिए content: "" काफी है।
सामग्री के बाद — ::after
::after वही विचार है सामग्री के बाद — इकाई, बैज या छोटा प्रत्यय।
बाद — बाहरी लिंक संकेत
cssa.external::after {
content: " ↗";
font-size: 0.85em;
}ज़रूरी अर्थ यहाँ न छिपाएँ
स्क्रीन रीडर और कुछ टूल जेनरेट सामग्री से अलग व्यवहार करते हैं। महत्वपूर्ण निर्देश सिर्फ ::before/::after में न रखें; असली टेक्स्ट HTML में रहे।
पहला अक्षर — ::first-letter
::first-letter ब्लॉक टेक्स्ट का पहला अक्षर स्टाइल करता है — पैराग्राफ़ शुरू का क्लासिक बड़ा अक्षर।
पहला अक्षर — बड़ा शुरुआती अक्षर
css.lead::first-letter {
font-size: 2.5rem;
font-weight: 700;
color: #0f766e;
float: left;
line-height: 1;
margin-right: 0.15em;
}पहली पंक्ति — ::first-line
::first-line सिर्फ पहली दिखने वाली पंक्ति स्टाइल करता है — «पहला वाक्य» नहीं, बल्कि ब्राउज़र रैप से बनी पंक्ति।
पहली पंक्ति — थोड़ा मोटा
css.lead::first-line {
font-weight: 600;
color: #334155;
}खाली सजावटी बॉक्स
कभी सिर्फ रंगीन पट्टी चाहिए, बिना टेक्स्ट। content: "" काफी है।
खाली before — सजावटी पट्टी
css.card::before {
content: "";
display: block;
height: 4px;
background: #0f766e;
margin-bottom: 0.75rem;
}अच्छी आदतें
- स्यूडो-एलिमेंट = दो कोलन (
::before); स्यूडो-क्लास = एक (:hover) - दिखना हो तो
::before/::afterपरcontentलगाएँ - ज़रूरी टेक्स्ट HTML में रखें, सिर्फ जेनरेट सामग्री में नहीं
::first-letterऔर::first-lineटेक्स्ट ब्लॉक पर काम करते हैं- पुराना
:beforeचले तो भी आधुनिक::चुनें
खुद आज़माएँ
- छोटी पेज:
.quoteपैरा,.leadपैरा,a.externalलिंक, टेक्स्ट वाला.card। .quote::before { content: "“"; color: #0f766e; }लगाएँ और उद्धरण देखें।- class
externalवाले लिंक परa.external::after { content: " ↗"; }। .lead::first-letterबड़ा और teal;.lead::first-lineपरfont-weight: 600।- ऊपर की पट्टी के लिए
.card::before { content: ""; display: block; height: 4px; background: #0f766e; }।
आम गलतियाँ
:hoverजैसी स्थिति चाहते हुए:beforeलिखना — स्थिति एक कोलन; जेनरेट बॉक्स दोcontentभूलना ताकि कुछ न दिखे- चेतावनी की इकलौती प्रति सिर्फ
::afterमें रखना - खाली या सिर्फ-इमेज तत्व पर
::first-letterसे चमत्कार मानना ::first-lineको «पहला वाक्य» समझना — लाइन ब्रेक तय करता है
सार
- स्यूडो-एलिमेंट
::से हिस्सा या जेनरेट बॉक्स स्टाइल करते हैं ::before/::afterकोcontent(स्ट्रिंग या"") चाहिए::first-letterऔर::first-lineटेक्स्ट ब्लॉक की शुरुआत लेते हैं- महत्वपूर्ण अर्थ HTML में रहे
- एक कोलन = स्यूडो-क्लास; दो = स्यूडो-एलिमेंट
- उद्धरण, लिंक प्रत्यय और lead पैरा से अभ्यास करें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी