Question

我有一个包含数字1,2,3等的有序列表。如何为数字1,2,3添加背景色并在每个数字后都删除点？

<ol>
 	<li>Prep ingredients and Sauté if required.</li>
 	<li>Add ingredients to inner pot.</li>
 	<li>Close the lid. Set release to 0.</li>
</ol>

Answer 1

.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;
    }

<ol>
      <li class="bg-yellow">Yellow here</li>
      <li class="bg-red">Red here</li>
      <li class="bg-orange">Orange here</li>
      <li class="bg-green">Green here</li>
      <li class="bg-aqua">Aqua here</li>
    </ol>

Answer 2

这是一种依靠CSS变量的更动态的方式：

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);
}

<ol>
  <li >Red here</li>
  <li style="--c:yellow">Yellow here</li>
  <li style="--c:blue">Blue here</li>
  <li style="--c:orange">Orange here</li>
  <li style="--c:green">Green here</li>
</ol>

Answer 3

也许这可以帮助设置项目符号背景：

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

Answer 4

Qt Creator.

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;
}

Answer 5

        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*/
        }

        <ol>
          <li>Prep ingredients and Sauté if required.</li>
          <li>Add ingredients to inner pot.</li>
          <li>Close the lid. Set release to 0.</li>
        </ol>

Answer 6

希望这会有所帮助，但是使用css-counters和：before选择器，您可以执行所需的操作。

这是一个小提琴：

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>
 	<p>Prep ingredients and Sauté if required.</p>
 	<p>Add ingredients to inner pot.</p>
 	<p>Close the lid. Set release to 0.</p>
</div>

随时检查CSS计数器

将背景色添加到有序列表

6 个答案: