CSS3 এর after, before Pseudo element কি এবং কেন use করা হয় ? - প্রিয়লেখা

CSS3 এর after, before Pseudo element কি এবং কেন use করা হয় ?

sakeba
Published: September 5, 2016

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:

output1

একটা  editor open  করে  উপরের code  টুকু  লিখে  file  মেনু  থেকে  Save as এ ক্লিক করে File name:  index.html  দিয়ে save করে index.html ফাইলটি  browser  দিয়ে open করলে output এর  ছবির মত দেখাবে। ধন্যবাদ।