पाठ 22, कुल 30 में

CSS स्यूडो-एलिमेंट

4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन

English हिंदी

CSS स्यूडो-क्लास CSS फॉर्म

स्यूडो-क्लास किसी element को किसी खास स्थिति में style करता है। स्यूडो-एलिमेंट (pseudo-element) एक कदम आगे जाता है: यह किसी element के हिस्से को style करता है — पहला अक्षर, पहली लाइन, या वह content जो आपके HTML में है ही नहीं। इसे स्यूडो-क्लास से अलग दिखाने के लिए दो colon (::) के साथ लिखा जाता है, जैसे ::before।

Diagram — देखें, यह सब कैसे जुड़ता है

स्यूडो-एलिमेंट से designer बिना खाली tags जोड़े छोटी सजावट करते हैं: किसी quote से पहले बड़ा opening quote, कहानी की शुरुआत में रंगीन पहला अक्षर, सूची के item के सामने अपना bullet। HTML साफ रहता है, और सजावट का काम CSS करता है।

Before और After — CSS से content जोड़ें

::before किसी element की बिल्कुल शुरुआत में कुछ जोड़ता है, और ::after बिल्कुल आखिर में कुछ जोड़ता है। एक नियम जो कभी नहीं भूलना चाहिए: ये content property के बिना कुछ नहीं करते। खाली content: "" भी ज़रूरी है, नहीं तो स्यूडो-एलिमेंट दिखेगा ही नहीं।

.quote::before {
  content: "\201C";
  color: orange;
  font-size: 40px;
}
.quote::after {
  content: "\201D";
  color: orange;
  font-size: 40px;
}

First-line और First-letter — कहानी की शुरुआत

::first-line सिर्फ paragraph की पहली लाइन को style करता है — किसी लेख की शुरुआत को bold करने का एक पुराना तरीका। ::first-letter सिर्फ पहला अक्षर style करता है, जिससे किताबों और अखबारों वाला बड़ा सजावटी drop cap बनता है। दोनों सिर्फ block-level elements पर काम करते हैं, जैसे paragraph।

.story::first-letter {
  font-size: 48px;
  color: red;
  font-weight: bold;
}
.story::first-line {
  font-weight: bold;
}

Selection — highlight का रंग

जब visitor text पर mouse घसीटकर उसे select करता है, तो browser उसे highlight करता है — आमतौर पर नीले रंग से। ::selection से आप खुद वह highlight रंग चुन सकते हैं, ताकि selection आपकी साइट के रंगों से मेल खाए।

::selection {
  background-color: yellow;
}

Marker — सूची के bullet को style करें

::marker सूची के item के सामने वाले bullet या number को style करता है। आप text को छुए बिना उसका रंग और size बदल सकते हैं। यह छोटा सा detail है, लेकिन रंगीन markers से सादी सूची भी सजी हुई लगती है।

.points li::marker {
  color: green;
  font-size: 20px;
}

Note: ::before और ::after ऐसे boxes बनाते हैं जो element के अंदर होते हैं, उसके पहले और आखिरी बच्चे की तरह। वे असली HTML नहीं हैं — आप उन्हें page source में click करके नहीं देख सकते — लेकिन आप उन्हें किसी भी box की तरह style कर सकते हैं: रंग, size, background, यहाँ तक कि border भी।

Tip: छोटी सजावट के लिए ::before इस्तेमाल करें — heading से पहले एक सितारा, quote से पहले quote mark — अपने HTML में खाली <span> जोड़ने की बजाय। कम tags का मतलब है साफ HTML और आसान देखरेख।

आम गलतियाँ

::before को content property के बिना लिखना — स्यूडो-एलिमेंट फिर दिखता ही नहीं।
एक colon (:before) इस्तेमाल करना — पुराने browsers में यह चल जाता है, लेकिन सही आधुनिक तरीका दो colon का है।
किसी ज़रूरी चीज़, जैसे महत्वपूर्ण तस्वीर, को ::before में डालना — उसका कोई alternative text नहीं होता, इसलिए screen reader और search engine उसे देख नहीं सकते।
::first-letter को <span> जैसे inline element पर लगाना — यह सिर्फ block-level elements पर काम करता है।
यह भूल जाना कि ::selection highlight को style करता है, text का रंग नहीं — अगर text पढ़ना मुश्किल हो जाए, तो उसके अंदर color भी लिखें।

याद रखें

स्यूडो-एलिमेंट में दो colon होते हैं; स्यूडो-क्लास में एक।
::before और ::after को content property चाहिए, नहीं तो वे दिखते नहीं।
::first-line पहली लाइन को style करता है; ::first-letter drop cap बनाता है — दोनों को block element चाहिए।
::selection चुने हुए text का highlight रंग बदलता है; ::marker सूची के bullets को style करता है।
सजावट के लिए स्यूडो-एलिमेंट इस्तेमाल करें; असली content HTML में रखें।

याद रखने की तरकीब: एक colon = स्थिति, दो colon = हिस्सा — स्यूडो-क्लास एक colon, स्यूडो-एलिमेंट दो।

उदाहरण समझिए

.quote::before { content: "\201C"; } — quote के text से पहले एक बड़ा opening quote mark जोड़ा जाता है। कोड \201C opening double quote का character है।
.quote::after { content: "\201D"; } — quote के text के बाद उसी का closing quote mark जोड़ा जाता है।
.story::first-letter { font-size: 48px; color: #e11d48; } — कहानी का पहला अक्षर छपी किताब की तरह बड़ा लाल drop cap बन जाता है।
.story::first-line { font-weight: bold; } — कहानी की पूरी पहली लाइन bold हो जाती है, ताकि शुरुआती वाक्य सबसे अलग दिखे।
::selection { background-color: #fde047; } — जब visitor पेज पर कोई भी text select करता है, तो highlight browser के डिफ़ॉल्ट नीले रंग की बजाय पीला होता है।
.points li::marker { color: #16a34a; font-size: 20px; } — सूची के items के सामने वाले bullets सूची के text को छुए बिना हरे और थोड़े बड़े हो जाते हैं।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Pseudo-elements — A Short Story</title>
<style>
body {
  font-family: Georgia, serif;
}
h1 {
  color: #1e3a5f;
}
.quote {
  font-size: 20px;
  color: #1e3a5f;
}
.quote::before {
  content: "\201C";
  color: #f97316;
  font-size: 40px;
}
.quote::after {
  content: "\201D";
  color: #f97316;
  font-size: 40px;
}
.story::first-letter {
  font-size: 48px;
  color: #e11d48;
  font-weight: bold;
}
.story::first-line {
  font-weight: bold;
}
::selection {
  background-color: #fde047;
}
.points li::marker {
  color: #16a34a;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>A Short Story</h1>

<p class="quote">A little learning is a dangerous thing, but a lot of learning is a wonderful thing.</p>

<p class="story">Once, in a small town in Uttar Pradesh, a boy named Arjun decided to build his own website. He had no teacher, no expensive course — only a borrowed laptop and a free tutorial. Every evening after school, he typed one page, then another, until the whole town knew his name.</p>

<h2>What Arjun Learned</h2>
<ul class="points">
<li>HTML gives the page its shape.</li>
<li>CSS gives the page its beauty.</li>
<li>Practice every day beats talent.</li>
</ul>

</body>
</html>

परिणाम

परिणाम — ब्राउज़र में यह कैसा दिखता है

खुद करके देखें — लाइव एडिटर

नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।

<!DOCTYPE html>
<html>
<head>
<title>Pseudo-elements — A Short Story</title>
<style>
body {
  font-family: Georgia, serif;
}
h1 {
  color: #1e3a5f;
}
.quote {
  font-size: 20px;
  color: #1e3a5f;
}
.quote::before {
  content: "\201C";
  color: #f97316;
  font-size: 40px;
}
.quote::after {
  content: "\201D";
  color: #f97316;
  font-size: 40px;
}
.story::first-letter {
  font-size: 48px;
  color: #e11d48;
  font-weight: bold;
}
.story::first-line {
  font-weight: bold;
}
::selection {
  background-color: #fde047;
}
.points li::marker {
  color: #16a34a;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>A Short Story</h1>

<p class="quote">A little learning is a dangerous thing, but a lot of learning is a wonderful thing.</p>

<p class="story">Once, in a small town in Uttar Pradesh, a boy named Arjun decided to build his own website. He had no teacher, no expensive course — only a borrowed laptop and a free tutorial. Every evening after school, he typed one page, then another, until the whole town knew his name.</p>

<h2>What Arjun Learned</h2>
<ul class="points">
<li>HTML gives the page its shape.</li>
<li>CSS gives the page its beauty.</li>
<li>Practice every day beats talent.</li>
</ul>

</body>
</html>

पूरे एडिटर में खोलें

परिणाम

खुद क्यों सीखें — AI से पूछने के बजाय?

AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।