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

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

সিনট্যাক্স

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

উদাহরণ

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

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

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

Результат:

উদাহরণ

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

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

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

Результат:

আরও দেখুন