CSS ::before সিলেক্টর একটি সিলেক্টেড এলিমেন্টের আগে কন্টেন্ট ইনসার্ট করে। CSS :after একটি স্পেসিফাইড এলিমেন্টের পরে কন্টেন্ট ইনসার্ট করে। এই সিলেক্টরগুলো সাধারণত একটি প্যারাগ্রাফ বা একটি লিংকের আগে বা পরে টেক্সট যোগ করতে ব্যবহৃত হয়।
আপনি যখন একটি ওয়েবসাইট ডিজাইন করছেন, তবে আপনি একটি এলিমেন্টের কন্টেন্ট প্রদর্শিত হওয়ার আগে বা পরে কন্টেন্ট যোগ করতে চাইতে পারেন। উদাহরণস্বরূপ, আপনি একটি লিস্টে প্রতিটি বুলেট পয়েন্টের আগে একটি ইমেজ যোগ করতে চাইতে পারেন।
সেখানে CSS ::before এবং ::after pseudo-এলিমেন্টগুলো কাজে আসে। এই pseudo-এলিমেন্টগুলো আপনাকে একটি এলিমেন্টের কন্টেন্টের আগে বা পরে কন্টেন্ট ইনসার্ট করতে দেয়।
এই টিউটোরিয়াল উদাহরণসহ আলোচনা করবে, কীভাবে ::before এবং ::after pseudo-এলিমেন্টগুলো ব্যবহার করে একটি ওয়েব পেজে কন্টেন্ট ডেকোরেট করতে হয়। এই টিউটোরিয়াল পড়া শেষ করার মধ্যে, আপনি CSS-এ ::before এবং ::after pseudo-এলিমেন্টগুলো ব্যবহার করতে এক্সপার্ট হবেন।
CSS Pseudo-এলিমেন্টস
একটি pseudo-এলিমেন্ট একটি স্পেশাল কীওয়ার্ড যা আপনাকে একটি CSS সিলেক্টর দ্বারা সিলেক্টেড এলিমেন্টের একটি স্পেসিফিক পার্ট স্টাইল করতে দেয়। আমরা এই আর্টিকেলে pseudo-এলিমেন্টকে সিলেক্টর বলব কারণ প্রতিটি pseudo-এলিমেন্ট একটি সিলেক্টর।
Pseudo-এলিমেন্টগুলো তখন উপকারী যখন আপনি কোনো CSS ক্লাস বা ID যোগ ছাড়া একটি এলিমেন্টে স্টাইল অ্যাপ্লাই করতে চান। উদাহরণস্বরূপ, আপনি যদি একটি ওয়েব পেজের প্রতিটি লিংকের পরে একটি ">" অ্যারো যোগ করতে চান, তবে আপনি একটি pseudo-এলিমেন্ট ব্যবহার করতে পারেন।
CSS অনেক র্যাঞ্জের pseudo-এলিমেন্ট অফার করে। এতে ::first-line, ::first-letter, ::before, এবং ::after অন্তর্ভুক্ত। এই টিউটোরিয়ালের উদ্দেশ্যে, আমরা শেষ দুটোতে ফোকাস করব: ::before এবং ::after।
Pseudo-এলিমেন্টগুলো সাধারণত ডাবল কোলন (::) ব্যবহার করে রিপ্রেজেন্ট করা হয়। CSS3 সিঙ্গল কোলন সিনট্যাক্স (:) pseudo-এলিমেন্ট ডিক্লেয়ার করতে সাপোর্ট করলেও, টু কোলন নোটেশন ব্যবহার করা বেস্ট প্র্যাকটিস।
এটি কারণ টু কোলন নোটেশন pseudo-ক্লাসকে pseudo-এলিমেন্ট থেকে আলাদা করার জন্য ব্যবহৃত হয়।
CSS ::before Pseudo-এলিমেন্ট
::before pseudo-এলিমেন্ট একটি ওয়েব পেজে একটি এলিমেন্টের আগে প্রদর্শিত হওয়া কন্টেন্ট যোগ করে। প্রায়শই, এই এলিমেন্টটি একটি প্যারাগ্রাফের আগে টেক্সট যোগ করতে ব্যবহৃত হয়।
::before pseudo-এলিমেন্টের সিনট্যাক্স হলো:
selector::before { // CSS rules }
::before সিলেক্টর এলিমেন্টের নামের পরে যোগ করা হয় যেটিতে আপনি সিলেক্টর অ্যাপ্লাই করতে চান।
::before pseudo-এলিমেন্টের প্রধান কম্পোনেন্টগুলো নিচে দেওয়া হলো:
- selector সিলেক্টকে রেফার করে যেটিতে ::before অ্যাপ্লাই করা উচিত। তাই, আপনি যদি প্রতিটি "a" ট্যাগে একটি ::before এলিমেন্ট অ্যাপ্লাই করতে চান, তবে আপনার সিলেক্টর হবে "a"। অথবা আপনি যদি "link" ক্লাস নামের প্রতিটি এলিমেন্টের আগে একটি ::before এলিমেন্ট অ্যাপ্লাই করতে চান, তবে আপনি ".link" সিলেক্টর ব্যবহার করবেন।
- ::before ব্রাউজারকে বলে CSS রুলসের কন্টেন্ট সিলেক্টরের আগে যোগ করতে।
- CSS rules সেই রুলস যেগুলো সিলেক্টরের আগে অ্যাপ্লাই করা উচিত।
আপনি যদি CSS-এ সিলেক্টর কীভাবে কাজ করে সেটি সম্পর্কে আরও জানতে চান, তবে আমাদের CSS সিলেক্টর গাইড পড়ুন।
চলুন একটি উদাহরণের মাধ্যমে দেখি কীভাবে ::before pseudo-এলিমেন্ট কাজ করে।
::before CSS উদাহরণ
ধরুন আমরা একটি উদাহরণ ওয়েব পেজে প্রতিটি লিংকের আগে একটি লিংক ইমোজি (🔗) যোগ করতে চাই। আমরা নিচের কোড ব্যবহার করে এই টাস্ক সম্পন্ন করতে পারি:
আমাদের কোড রিটার্ন করে:
আমাদের HTML ফাইলে, আমরা একটি HTML <a> ট্যাগ ডিফাইন করেছি যা Career Karma হোমপেজে লিংক করে। তারপর, আমাদের CSS ফাইলে, আমরা ::before pseudo-এলিমেন্ট ব্যবহার করেছি আমাদের ওয়েব পেজের প্রতিটি <a> ট্যাগের আগে লিংক ইমোজি যোগ করতে।
আমরা এটিকে সম্পন্ন করেছি আমাদের CSS ফাইলে একটি content প্রোপার্টি স্পেসিফাই করে, যা এর মত দেখায়:
content: "🔗";
আমাদের রুল আমাদের তৈরি করা <a> ট্যাগের শুরুতে একটি লিংক ইমোজি যোগ করেছে।
"content" অ্যাট্রিবিউটের মান হতে পারে:
- একটি স্ট্রিং, যেমন "This is a string."।
- একটি কাউন্টার, যেমন "counter(li);"।
- একটি ইমেজ, যেমন "url(/path/to/image.png)"।
- একটি ব্ল্যাঙ্ক স্ট্রিং, যেমন ""।
আপনি content অ্যাট্রিবিউটে একটি HTML এলিমেন্ট ইনসার্ট করতে পারবেন না।
CSS ::after Pseudo-এলিমেন্ট
CSS ::after pseudo-এলিমেন্ট একটি ওয়েব পেজে একটি এলিমেন্টের ঠিক পরে কন্টেন্ট অ্যাড করতে দেয়। ::before সিলেক্টরের মত, ::after প্রায়শই লিংক বা টেক্সটের প্যারাগ্রাফের সাথে ব্যবহার করা হয়।
::after pseudo-এলিমেন্টের সিনট্যাক্স নিম্নরূপ:
selector::after { // CSS rules }
::after-র সিনট্যাক্স ::before pseudo-এলিমেন্টের সিনট্যাক্সের মতোই। ::after content অ্যাট্রিবিউটের জন্য আমরা আগে আলোচনা করা একই মানগুলো এক্সেপ্ট করে।
::after CSS উদাহরণ
ধরুন আমরা Hansons Bakery নামক একটি বেকারির জন্য একটি ওয়েবসাইটে একটি লিংক এলিমেন্ট ডিজাইন করছি। এই লিংকটি টেক্সট "Go to the Hansons Bakery homepage." ডিসপ্লে করা উচিত। আমাদের লিংকটি ১px-চওড়া স olid কালো বর্ডার দিয়ে ঘেরা হওয়া উচিত।
"ক্যারিয়ার করমা আমার জীবনে তখন প্রবেশ করলো যখন আমার সেটি সবচেয়ে বেশি দরকার ছিল এবং দ্রুত আমাকে একটি বুটক্যাম্পের সাথে মিলিয়ে দিলো। গ্র্যাজুয়েট হওয়ার দুই মাস পর, আমার সপনোর চাকরি পেলাম যা আমার মূল্যবোধ এবং জীবনের লক্ষ্যের সাথে মিলে যাচ্ছে!"
ভেনাস, সফ্টওয়্যার ইঞ্জিনিয়ার, রকবট
আপনার বুটক্যাম্প ম্যাচ খুঁজুন
আমাদের লেবেলের পরে, আমরা একটি টেক্সট বক্স প্রদর্শিত হওয়া চাই যেতে কন্টেন্ট This page shows off our baked goods menu. থাকে। (শব্দ "This"-এর আগে সাদা স্পেস লক্ষ্য করুন।) আমাদের বক্সের একটি অরেঞ্জ HTML ব্যাকগ্রাউন্ড কালার থাকা উচিত।
আমরা নিচের কোড ব্যবহার করে এই টাস্ক সম্পন্ন করতে পারি:
index.html <a href="/" class="label">Go to the Hansons Bakery homepage.</a> styles.css .label { border: 1px solid black; } .label::after { content: " This page shows off our baked goods menu."; background-color: orange; }
আমাদের কোড নিচের মত কন্টেন্ট জেনারেট করেছে:
আমাদের কোডে, আমরা একটি <a> ট্যাগ ব্যবহার করে আমাদের হোমপেজে একটি লিংক ডিফাইন করেছি। আমাদের লিংক সাথে জড়িত ক্লাস নাম .label।
আমাদের CSS ফাইলে, আমরা ১px-চওড়া স olid কালো বর্ডার অ্যাপ্লাই করেছি প্রতিটি এলিমেন্টে যাদের ক্লাস নাম .label।
তারপর, আমরা ::after সিলেক্টর ব্যবহার করেছি আমরা আগে বর্ণনা করা টেক্সট বক্স তৈরি করতে। টেক্সট বক্সটি কন্টেন্ট "This page shows off our baked goods menu." ডিসপ্লে করে। আমাদের বক্সের একটি অরেঞ্জ ব্যাকগ্রাউন্ড।
উপসংহার
::before এবং ::after pseudo-এলিমেন্টগুলো আপনাকে একটি CSS রুলে আপনি যেসিলেক্ট করেছেন সে এলিমেন্টের একটি স্পেসিফিক পার্টে কন্টেন্ট যোগ করতে দেয়। উদাহরণস্বরূপ, ::before সিলেক্টর একটি লিংকের আগে টেক্সট যোগ করতে ব্যবহার করা যেতে পারে। ::after সিলেক্টর একটি প্যারাগ্রাফ টেক্সটের পরে একটি ইমোজি যোগ করতে ব্যবহার করা যেতে পারে।
এই টিউটোরিয়াল উদাহরণসহ আলোচনা করেছে, CSS-এ pseudo-এলিমেন্টের বেসিকস এবং কীভাবে ::before এবং ::after pseudo-এলিমেন্টগুলো ব্যবহার করতে হয়। এখন আপনি CSS-এ ::before এবং ::after pseudo-এলিমেন্টগুলো একটি প্রফেশনাল ওয়েব ডিজাইনার처럼 ব্যবহার করতে প্রস্তুত।
টপ CSS ওয়েব ডেভেলপার লার্নিং সংস্থান, বই, এবং কোর্সের জন্য পরামর্শ পেতে, আমাদের How to Learn CSS গাইড চেক আউট করুন।
