CSS Pseudo-elements

एक letter लिखने की कल्पना करें। Default रूप से, आपकी pen standard letters लिखती है। लेकिन अगर आप इसे कुछ special दिखाना चाहें, तो आप अपने paragraph की बिल्कुल शुरुआत में एक बड़ा, decorative capital letter draw कर सकते हैं, या अपने signature से ठीक पहले एक cute छोटा star sticker जोड़ सकते हैं। CSS pseudo-elements वही decorative additions हैं। जबकि pseudo-classes elements को specific states में target करते हैं, pseudo-elements आपको अपनी stylesheet से सीधे, अपनी HTML files बदले बिना, बिल्कुल नए, virtual elements (जैसे icons या drop caps जोड़ना) बनाने और style करने देते हैं।

In this page:

Pseudo-element क्या है?
::before से Content Insert करना
::after से Content Insert करना
::selection से Custom Selection Colors
::placeholder से Form Placeholders को Style करना

Syntax

css

selector::pseudo-element {
  property: value;
}

p::first-line { }
element::before { content: "text"; }

Pseudo-element क्या है?

Pseudo-elements किसी element के specific हिस्सों को style करने के लिए, या अपनी stylesheet से सीधे अपने layout में virtual elements insert करने के लिए इस्तेमाल होते हैं, उन्हें pseudo-classes से अलग दिखाने के लिए एक double colon (::) prefix इस्तेमाल करते हुए।

Note: modern CSS standards का पालन करने के लिए pseudo-elements के लिए हमेशा double colon (::) prefix इस्तेमाल करें।

Warning: ::before और ::after pseudo-elements में एक content property defined होनी चाहिए (भले ही वह खाली हो), वरना वे render होने में fail हो जाएँगे।

उदाहरण: What is a Pseudo-element?

css

<style>
p::before {
  content: "» ";
}
</style>
<p>Pseudo-element inserted before this text</p>

::before से Content Insert करना

::before pseudo-element आपको किसी element के content से ठीक पहले virtual content insert करने देता है। यह अपनी HTML files को cluttered किए बिना decorative icons, bullet markers, या automated labels जोड़ने के लिए बेहद उपयोगी है।

Note: अपने secure link routes के बगल में uniform visual icons (जैसे lock symbols) जोड़ने के लिए ::before इस्तेमाल करें।

Warning: अपने pseudo-elements के अंदर essential text content न रखें, क्योंकि screen readers उन्हें नज़रअंदाज़ कर सकते हैं।

उदाहरण: Inserting Content with ::before

css

<style>
.secure::before {
  content: "🔒 ";
}
</style>
<a class="secure" href="#">Secure Link</a>

::after से Content Insert करना

::after pseudo-element बिल्कुल ::before जैसा काम करता है, लेकिन यह targeted element के content के ठीक बाद virtual content insert करता है। यह आमतौर पर file formats, external link icons जोड़ने, या floated parent containers को clear करने के लिए इस्तेमाल होता है।

Note: pages print करते समय anchor text के बगल में absolute link paths automatically जोड़ने के लिए ::after इस्तेमाल करें।

Warning: pseudo-elements से inject किया गया सारा content screen पर users द्वारा non-selectable है।

उदाहरण: Inserting Content with ::after

css

<style>
a.pdf::after {
  content: " (PDF)";
}
</style>
<a class="pdf" href="#">Download Report</a>

::selection से Custom Selection Colors

::selection pseudo-element आपको उन highlight और text colors को customize करने देता है जो तब इस्तेमाल होते हैं जब कोई user आपकी webpage पर text select या highlight करता है, browser के default blue highlighting को अपने खुद के brand themes से बदलते हुए।

Note: ऐसे selection colors चुनें जो आपके highlighted text के against high contrast दें ताकि वह readable रहे।

Warning: ::selection pseudo-element सिर्फ background-color और color styling rules को support करता है; font-size जैसी दूसरी properties को नज़रअंदाज़ किया जाएगा।

उदाहरण: Custom Selection Colors with ::selection

css

<style>
::selection {
  background: gold;
  color: black;
}
</style>
<p>Select this text to see a custom highlight color</p>

::placeholder से Form Placeholders को Style करना

::placeholder pseudo-element आपको अपने form inputs के अंदर temporary, grayed-out placeholder hints को style करने देता है, उनकी text color, font style, और opacity को अपनी website theme के साथ coordinate करने के लिए customize करते हुए।

Note: सुनिश्चित करें कि आपकी placeholder text color बहुत light या बहुत dark न हो ताकि यह readable रहे।

Warning: कुछ पुराने browsers को placeholders सही तरीके से style करने के लिए vendor prefixes (जैसे -webkit-input-placeholder) चाहिए होते हैं।

उदाहरण: Styling Form Placeholders with ::placeholder

css

<style>
input::placeholder {
  color: #999;
  font-style: italic;
}
</style>
<input type="text" placeholder="Enter your name">

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Pseudo-classes Next Lesson → CSS Opacity