একটি আদেশ তালিকা ব্যাকগ্রাউন্ড রঙ যোগ করুন

আমি সংখ্যা 1,2,3 সঙ্গে একটি আদেশ তালিকা আছে ইত্যাদি। আমি 1,2,3 সংখ্যা ব্যাকগ্রাউন্ড রঙ যোগ করতে পারেন এবং এই সংখ্যা প্রতিটি পর বিন্দু মুছে ফেলতে পারেন?

JSFIDDLE

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">


  1. Prep ingredients and Sauté if required.
  2. Add ingredients to inner pot.
  3. Close the lid. Set release to 0.
</div> </div>

0
সময়কাল সরান: CSS সময়কাল ছাড়াই তালিকাভুক্ত তালিকা "stackoverflow.com/ প্রশ্ন/5945161/করছে & hellip;
যোগ লেখক imvain2, উৎস
যোগ লেখক imvain2, উৎস

6 উত্তর

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.bg-yellow:before {
      background-color: yellow;
    }
    .bg-red:before {
      background-color: red;
    }
    .bg-green:before {
      background-color: green;
    }
    .bg-orange:before {
      background-color: orange;
    }
    .bg-aqua:before {
      background-color: aqua;
    }
    ol {
      counter-reset: myOrderedListItemsCounter;
    }
    ol li {
      list-style-type: none;
      position: relative;
    }
    ol li:before {
      counter-increment: myOrderedListItemsCounter;
      content: counter(myOrderedListItemsCounter)" ";
      margin-right: 0.5em;
    }

  1. Yellow here
  2. Red here
  3. Orange here
  4. Green here
  5. Aqua here
</div> </div>

4
যোগ
একটি যাদুমন্ত্র মত কাজ করে. আমার একমাত্র উদ্বেগ যে বর্গক্ষেত্রের পরিবর্তে বৃত্তের আকারে ব্যাকগ্রাউন্ডের রঙ তৈরি করার কোন উপায় আছে?
যোগ লেখক Dev B, উৎস

এখানে আরও গতিশীল উপায় যা CSS পরিবর্তনশীল উপর নির্ভর করে:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

ol {
  counter-reset: count;
}

ol li {
  list-style-type: none;
  position: relative;
}

ol li:before {
  counter-increment: count;
  content: counter(count)" ";
  margin-right: 0.5em;
  display:inline-block;
  padding:0 5px;
  border-radius:50%;
  color:#fff;
  background:var(--c,red);
}

  1. Red here
  2. Yellow here
  3. Blue here
  4. Orange here
  5. Green here
</div> </div>

0
যোগ

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

ol.custom {
  list-style-type: none;
  margin-left: 0;
}

ol.custom > li {
  counter-increment: customlistcounter;
 
}

ol.custom > li:before {
  content: counter(customlistcounter) " ";
  font-weight: bold;
  float: left;
  width: 3em;
  color: red;
}

ol.custom:first-child {
  counter-reset: customlistcounter;
}

  1. Prep ingredients and Sauté if required.
  2. Add ingredients to inner pot.
  3. Close the lid. Set release to 0.
</div> </div>

0
যোগ

আশা করি এটি সাহায্য করবে, কিন্তু CSS-কাউন্টারের সাথে এবং: নির্বাচকদের আগে, আপনি যা করতে চান তা করতে পারেন।

এখানে একটি বাজে কথা

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

div {
  counter-reset: list;
}

p:before {
  counter-increment: list;
  content: counter(list);
  background-color: #000;
  color:white;
  margin-right: 1em;
  padding: 0 0.25em;
}
<div>
        
Prep ingredients and Sauté if required.


Add ingredients to inner pot.


Close the lid. Set release to 0.

</div>
</div> </div>

সিএসএস কাউন্টার চেক বিনামূল্যে বোধ

0
যোগ

হয়তো এটি বুলেট পটভূমি সেট করতে সাহায্য করতে পারে:

li::before 
{
    content: "1"; color: red;
    display: inline-block; width: 1em;
    margin-left: -1em
}
0
যোগ

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

        ol {
          counter-reset: item; /*Remove default style*/
          list-style-type: none;
          padding-left: 20px; /*space between the block and the number*/
        }

        li {
          display: block;
        }

        li:before {
          background-color: #F007; /*Background*/
          border-radius: 50%; /*make rounded*/
          margin-right: 4px; /*Space between text and number*/
          padding-left: 4px; /*fix the innerspace as needed*/
          content: counter(item) "  "; /*Count the lines*/
          counter-increment: item /*apply the counter*/
        }
        
  1. Prep ingredients and Sauté if required.
  2. Add ingredients to inner pot.
  3. Close the lid. Set release to 0.
</div> </div>

0
যোগ