একটি pseudo-element (দ্বি-কোলন ::) একটি উপাদানের নির্দিষ্ট অংশ স্টাইল করে, অথবা কন্টেন্ট তৈরি করে যা HTML-তে নেই — অতিরিক্ত মার্কআপ যোগ না করে।
::before এবং ::after — তৈরি কন্টেন্ট
css
{
: ;
}
{
: ;
}
একটি pseudo-element (দ্বি-কোলন ::) একটি উপাদানের নির্দিষ্ট অংশ স্টাইল করে, অথবা কন্টেন্ট তৈরি করে যা HTML-তে নেই — অতিরিক্ত মার্কআপ যোগ না করে।
{
: ;
}
{
: ;
}
content সম্পত্তি বাধ্যতামূলক — এটি ছাড়া, pseudo-element রেন্ডার হয় না। তৈরি কন্টেন্ট উপাদানের একেবারে শুরুতে (::before) বা শেষে (::after) একটি চাইল্ড।
.tooltip::after {
content: ""; /* empty but present → creates a box */
position: absolute;
border: 8px solid transparent;
border-top-color: black; /* a CSS triangle (tooltip arrow) */
}
এটি ক্লাসিক ব্যবহার: তীর, ব্যাজ, ওভারলে, সজ্জামূলক লাইন আঁকা — HTML কে বিশুদ্ধ-ভিজ্যুয়াল উপাদান থেকে মুক্ত রাখা।
p::first-line { font-weight: bold; } /* the first rendered line */
p::first-letter { font-size: 3em; } /* drop cap */
::selection { background: yellow; } /* highlighted/selected text */
input::placeholder { color: gray; } /* placeholder text */
.x:hover { } /* pseudo-CLASS (state) — one colon */
.x::before { } /* pseudo-ELEMENT (a part) — two colons */
CSS3 pseudo-elements কে pseudo-classes থেকে আলাদা করতে :: চালু করেছে (ব্রাউজারগুলি সামঞ্জস্যের জন্য পুরানো রূপগুলিতে একক কোলন গ্রহণ করে তবে ::ব্যবহার করুন)।
তৈরি content কিছু স্ক্রীন রিডার দ্বারা পড়া হয় — শুধুমাত্র ::before/::after এ প্রয়োজনীয় তথ্য রাখবেন না (সজ্জার জন্য এটি ব্যবহার করুন), এবং সজ্জামূলক আইকনগুলি অ্যাক্সেসযোগ্যতা ট্রিতে থেকে রাখা সেরা।
Pseudo-elements আপনাকে আইকন, সজ্জামূলক আকৃতি (তীর, বিভাজক), drop caps এবং কাউন্টার বিশুদ্ধভাবে CSS-এ যোগ করতে দেয় — অতিরিক্ত <div>s বা <span>s ছাড়াই।
তারা মার্কআপকে semantic রেখে সমৃদ্ধ ভিজ্যুয়াল বিবরণ সক্ষম করে, এবং তারা পরিষ্কার, রক্ষণাবেক্ষণযোগ্য স্টাইলিংয়ের একটি মূল অংশ।