পসিউডো এলিমেন্ট before

পসিউডো এলিমেন্ট before টেক্সট সন্নিবেশ করে এলিমেন্টের আগে। শুধুমাত্র ব্যবহার করা হয় content প্রপার্টির সাথে সমন্বয়ে, যা সন্নিবেশিত করার টেক্সট নির্ধারণ করে।

সিনট্যাক্স

সিলেক্টর::before {
	content: 'টেক্সট';
}

উদাহরণ

আসুন এমন করা যাক যাতে যখন li-এর উপর হোভার করা হয় তখন এর শুরুতে টেক্সট সন্নিবেশিত হয়:

<ul>
	<li>তালিকার আইটেম</li>
	<li>তালিকার আইটেম</li>
	<li>তালিকার আইটেম</li>
	<li>তালিকার আইটেম</li>
	<li>তালিকার আইটেম</li>
</ul>

li:hover::before {
	content: '!!!';
}

উদাহরণ

সন্নিবেশিত টেক্সটে বিভিন্ন স্টাইল প্রয়োগ করা যেতে পারে। উদাহরণস্বরূপ, এই টেক্সটটিকে কোনো একটি রঙে রাঙানো যাক:

<ul>
	<li>তালিকার আইটেম</li>
	<li>তালিকার আইটেম</li>
	<li>তালিকার আইটেম</li>
	<li>তালিকার আইটেম</li>
	<li>তালিকার আইটেম</li>
</ul>

li:hover::before {
	color: red;
	content: '!!!';
}

আরও দেখুন

পসিউডো এলিমেন্ট after,
যা ট্যাগের টেক্সটের পরে সন্নিবেশ করে
ফাংশন attr,
যা ট্যাগের অ্যাট্রিবিউটের মান পায়
প্রপার্টি counter-increment,
যা স্বয়ংক্রিয় সংখ্যায়ন নির্ধারণ করে