CSS3 এর after, before Pseudo element কি এবং কেন use করা হয় ? – Creative IT Blog
Notice: Trying to access array offset on value of type bool in /home1/cjsmpham/_addon/priyolekha.com/wp-content/plugins/taqyeem/taqyeem.php on line 611

Notice: Trying to access array offset on value of type bool in /home1/cjsmpham/_addon/priyolekha.com/wp-content/plugins/taqyeem/taqyeem.php on line 611

Notice: Trying to access array offset on value of type bool in /home1/cjsmpham/_addon/priyolekha.com/wp-content/plugins/taqyeem/taqyeem.php on line 611

Notice: Trying to access array offset on value of type bool in /home1/cjsmpham/_addon/priyolekha.com/wp-content/plugins/taqyeem/taqyeem.php on line 611

Notice: Trying to access array offset on value of type bool in /home1/cjsmpham/_addon/priyolekha.com/wp-content/plugins/taqyeem/taqyeem.php on line 611

Notice: Trying to access array offset on value of type bool in /home1/cjsmpham/_addon/priyolekha.com/wp-content/plugins/taqyeem/taqyeem.php on line 611
Home / ওয়েব ডিজাইন / CSS3 এর after, before Pseudo element কি এবং কেন use করা হয় ?

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

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 এর  ছবির মত দেখাবে। ধন্যবাদ।

About sakeba

Check Also

html list

ওয়েব ডিজাইন Part-9( HTML list)

 HTML list: একটা ওয়েব পেজকে সুন্দর করে সাজানো এবং তথ্য উপস্থাপনার অন্যতম পদ্ধতি লিষ্ট । …