Before Pseudo element :
একটা HTML পেজের সকল প্যারাগ্রাফের অথবা হেডিং এর শুরুতেই যদি একই টেক্সট বা ইমেজ যুক্ত করার প্রয়োজন হয় এক্ষেত্রে Before Pseudo element use করা হয়। css file এ এটাকে select করতে হবে p:before{} অনুরূপভাবে। এবং tag এর পূর্বে আপনি যে লেখাটি দেখাতে চান তা content:” this is before content”; এর অনুরূপভাবে ডিক্লারেশন করতে হবে । যদি ইমেজ দেখাতে চান তাহলে p:before {content:url(images/logo2.png);} এর অনুরূপে css file এ লিখতে হবে।
After Pseudo element :
একটা HTML পেজের সকল প্যারাগ্রাফের অথবা হেডিং এর শেষে যদি একই টেক্সট বা ইমেজ যুক্ত করার প্রয়োজন হয় এক্ষেত্রে After Pseudo element use করা হয়। css file এ এটাকে select করতে হবে p:after{} অনুরূপভাবে। এবং tag এর পূর্বে আপনি যে লেখাটি দেখাতে চান তা content:”this is after content “; এর অনুরূপভাবে ডিক্লারেশন করতে হবে । যদি ইমেজ দেখাতে চান তাহলে p:after{content:url(images/logo2.png);} এর অনুরূপে css file এ লিখতে হবে। নিম্নে example দেয়া হল।
<html>
<head>
<title> Creative IT Institute </title>
<style>
p:before{
background-color: bisque;
content: “Lorem ipsum dolor sit amet.”;
}
p:after{
background-color: rebeccapurple;
color: white;
content: “here is the content of after p tag”;
}
</style>
</head>
<body >
<div>
<p>
Creative IT Ltd. started its activities with providing IT & ITES
</p>
<p>
Services are inclusive BPO, Software Development, Web Design & Development
</p>
<p>
Software Development, Web Design & Development
</p>
<p>
Services are inclusive BPO, Creative IT Ltd.
</p>
<p>
started its activities with providing IT & ITES
</p>
</div>
</body>
</html>
output:
একটা editor open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html দিয়ে save করে index.html ফাইলটি browser দিয়ে open করলে output এর ছবির মত দেখাবে। ধন্যবাদ।