CSS ::মার্কার সহ কাস্টম বুলেট

Adam Argyle

Oriol Brufau

প্রকাশিত: ২ সেপ্টেম্বর, ২০২০

CSS ::marker আপনাকে HTML তালিকার বুলেট এবং সংখ্যার বিষয়বস্তু এবং কিছু স্টাইল পরিবর্তন করতে দেয়।

ছদ্ম-উপাদানের ভূমিকা

একটি ছদ্ম-উপাদান ডকুমেন্টের এমন একটি অংশকে প্রতিনিধিত্ব করে যা ডকুমেন্ট ট্রিতে প্রতিনিধিত্ব করা হয় না। উদাহরণস্বরূপ, আপনি ছদ্ম-উপাদান p::first-line ব্যবহার করে একটি অনুচ্ছেদের প্রথম লাইন নির্বাচন করতে পারেন, যদিও কোনও HTML উপাদান সেই লাইনটি মোড়ানো নেই।

নিম্নলিখিত HTML unordered তালিকাটি বিবেচনা করুন:

<ul>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
  <li>Dolores quaerat illo totam porro</li>
  <li>Quidem aliquid perferendis voluptates</li>
  <li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit
      consequatur alias facilis rem</li>
  <li>Fuga</li>
</ul>

যা ডিফল্ট স্টাইলিং সহ নিম্নরূপ রেন্ডার করে:

প্রতিটি <ul> এলিমেন্টের শুরুতে থাকা ডটটি তালিকা রেন্ডার করার অংশ হিসেবে তৈরি করা হয় এবং এর নিজস্ব HTML এলিমেন্ট থাকে না। ::marker হল একটি ছদ্ম-এলিমেন্ট যা সেই ডট, অথবা একটি অর্ডার করা তালিকা এলিমেন্টের শুরুতে থাকা সংখ্যাকে প্রতিনিধিত্ব করে।

একটি মার্কার তৈরি করুন

::marker ছদ্ম-উপাদান মার্কার বক্সটি প্রতিটি তালিকা আইটেম উপাদানের ভিতরে স্বয়ংক্রিয়ভাবে তৈরি হয়, প্রকৃত বিষয়বস্তু এবং ::before ছদ্ম-উপাদান উভয়ের আগে।

li::before {
  content: "::before";
  background: lightgray;
  border-radius: 1ch;
  padding-inline: 1ch;
  margin-inline-end: 1ch;
}

তালিকার আইটেমগুলি সাধারণত <li> HTML উপাদান, তবে আপনি অন্যান্য উপাদানগুলিকে তালিকার আইটেমে রূপান্তর করতে display: list-item ব্যবহার করতে পারেন।

<dl>
  <dt>Lorem</dt>
  <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
  <dd>Dolores quaerat illo totam porro</dd>

  <dt>Ipsum</dt>
  <dd>Quidem aliquid perferendis voluptates</dd>
</dl>

dd {
  display: list-item;
  list-style-type: "🤯";
  padding-inline-start: 1ch;
}

মার্কার স্টাইল করুন

::marker উপলব্ধ হওয়ার আগে, আপনি list-style-type এবং list-style-image ব্যবহার করে lists স্টাইল করতে পারেন list item প্রতীক পরিবর্তন করতে:

li {
  list-style-image: url(/right-arrow.svg);
  /* OR */
  list-style-type: '👉';
  padding-inline-start: 1ch;
}

::marker আপনার CSS-এ পৃথকভাবে বা বিশ্বব্যাপী মার্কার সিউডো-এলিমেন্টগুলিকে লক্ষ্য করার সুযোগ দিয়ে মার্কারগুলির রঙ, আকার এবং ব্যবধান পরিবর্তন করার ক্ষমতা যোগ করে:

li::marker {
  color: hotpink;
}

li:first-child::marker {
  font-size: 5rem;
}

::marker আপনাকে list-style-type তুলনায় মার্কার স্টাইলের উপর অনেক বেশি নিয়ন্ত্রণ দেয়, কিন্তু এটি প্রতিটি CSS প্রোপার্টির সাথে কাজ করে না। নিম্নলিখিত প্রোপার্টিগুলি অনুমোদিত:

• animation-*
• transition-*
• color
• direction
• font-*
• content
• unicode-bidi
• white-space

list-style-type ব্যবহার করে নয়, content ব্যবহার করে একটি ::marker এর বিষয়বস্তু পরিবর্তন করুন। পরবর্তী উদাহরণে দেখানো হয়েছে কিভাবে list-style-type এর বৈশিষ্ট্যগুলি সম্পূর্ণ তালিকা আইটেমের ক্ষেত্রে প্রযোজ্য হয়, এবং ::marker আপনাকে কেবল মার্কার বাক্সটি লক্ষ্য করতে দেয়। background বৈশিষ্ট্য list-style-type এর সাথে কাজ করে, কিন্তু ::marker সাথে নয়।

li:nth-child(1) {
  list-style-type: '?';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}

li:nth-child(2)::marker {
  content: '!';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}

একটি মার্কারের বিষয়বস্তু পরিবর্তন করুন

আপনার মার্কার স্টাইল করার কিছু উদাহরণ এখানে দেওয়া হল।

তালিকার সমস্ত আইটেম পরিবর্তন করুন

li {
  list-style-type: "😍";
}

/* OR */

li::marker {
  content: "😍";
}

শুধুমাত্র একটি তালিকার আইটেম পরিবর্তন করুন

li:last-child::marker {
  content: "😍";
}

SVG দিয়ে মার্কার সংজ্ঞায়িত করুন

li::marker {
  content: url(/heart.svg);
  content: url(#heart);
  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}

ক্রমানুসারে তালিকা পরিবর্তন করুন

<ol> সম্পর্কে কী বলা যায়? একটি অর্ডার করা তালিকার আইটেমের মার্কারটি ডিফল্টভাবে একটি সংখ্যা, বিন্দু বা "বুলেট" নয়। CSS-এ, এগুলিকে Counters বলা হয় এবং সংখ্যাটি কোথায় শুরু এবং শেষ হয় তা সেট বা রিসেট করার জন্য, অথবা সেগুলিকে, উদাহরণস্বরূপ, রোমান সংখ্যায় স্যুইচ করার জন্য এগুলির বৈশিষ্ট্য রয়েছে। আপনি কাউন্টারগুলিকে স্টাইল করতে ::marker ব্যবহার করতে পারেন, এবং এমনকি আপনার নিজস্ব নম্বর উপস্থাপনা তৈরি করতে মার্কার সামগ্রী মান ব্যবহার করতে পারেন।

li::marker {
  content: counter(list-item) "› ";
  color: hotpink;
}

ডিবাগ

Chrome DevTools ক্যাব আপনাকে ::marker সিউডো-এলিমেন্টগুলিতে প্রয়োগ করা স্টাইলগুলি পরিদর্শন, ডিবাগ এবং সংশোধন করতে সহায়তা করে।

রিসোর্স

::marker সম্পর্কে আরও জানতে আপনি এখান থেকে জানতে পারবেন:

• স্ম্যাশিং ম্যাগাজিন থেকে সিএসএস তালিকা, মার্কার এবং কাউন্টার
• CSS-Tricks থেকে CSS কাউন্টার এবং CSS গ্রিড দিয়ে গণনা
• MDN থেকে CSS কাউন্টার ব্যবহার করা