Pseudo-elements, CSS in Hindi

Pseudo-elements, CSS में किसी element के specific parts को style करने के लिए उपयोग किए जाते हैं। ये आपको किसी element के content के पहले (before) या बाद में (after) content जोड़ने, किसी element के पहले अक्षर (first letter) या पहली पंक्ति (first line) को style करने की अनुमति देते हैं। Pseudo-elements को double colon (::) से दर्शाया जाता है, हालांकि backward compatibility के लिए single colon (:) का भी उपयोग किया जा सकता है।

Common Pseudo-Elements

1. ::before

   • यह element के content से पहले content जोड़ता है।

   • Example:

css

p::before {

  content: "Note: ";

  font-weight: bold;

  color: red;

}

यह हर <p> element से पहले "Note: " जोड़ेगा।

2. ::after

   • यह element के content के बाद में content जोड़ता है।

   • Example:

css

p::after {

  content: " - Read more";

  font-style: italic;

  color: blue;

}

यह हर <p> element के बाद " - Read more" जोड़ेगा।

3. ::first-letter

   • यह element के पहले अक्षर को style करता है।

   • Example:

css

p::first-letter {

  font-size: 2em;

  font-weight: bold;

  color: green;

}

यह हर <p> element के पहले अक्षर को बड़ा और bold बनाएगा।

4. ::first-line

   • यह element की पहली पंक्ति को style करता है।

   • Example:

css

p::first-line {

  font-weight: bold;

  color: purple;

}

यह हर <p> element की पहली पंक्ति को bold और purple बनाएगा।

5. ::selection

   • यह user द्वारा highlight किए गए portion को style करता है।

   • Example:

css

::selection {

  background-color: yellow;

  color: black;

}

यह highlight का रंग पीला (yellow) और text का रंग काला (black) कर देगा।

Key Points to Remember (याद रखने योग्य बातें)

• content Property: ::before और ::after pseudo-elements के लिए content दिखाने के लिए content property का उपयोग जरूरी है।

• Inline by Default: Pseudo-elements डिफ़ॉल्ट रूप से inline होते हैं, लेकिन आप उनकी display property को बदल सकते हैं।

• Combining Pseudo-Elements: आप pseudo-elements को classes या IDs के साथ combine करके specific targeting कर सकते हैं।

css

.special::before {

  content: "⭐";

}

Example: Combining Pseudo-Elements (Pseudo-Elements को Combine करना)

html

<p class="quote">This is a motivational quote.</p>

css

.quote::before {

  content: "“";

  font-size: 2em;

  color: orange;

}

.quote::after {

  content: "”";

  font-size: 2em;

  color: orange;

}

.quote::first-letter {

  font-size: 1.5em;

  font-weight: bold;

  color: navy;

}

.quote::first-line {

  font-style: italic;

}

Result:

• Text को orange quotation marks के साथ wrap किया जाएगा।

• पहला अक्षर बड़ा और bold होगा।

• पहली पंक्ति italic होगी।

Pseudo-elements, web pages के design और functionality को बेहतर बनाने के लिए बहुत powerful tools हैं, और इनका उपयोग करके आप extra HTML markup जोड़े बिना ही अच्छे results प्राप्त कर सकते हैं।