自定义有序列表样式

Question

嘿，我正在尝试修改 ol 列表样式，就像那张图片中的另一个网站一样。

但是使用另一个 CSS 图像而不是像该图片中的表单（无文本）那样的圆圈

我尝试了以下代码来重建其他网站正在做的事情，但我不知道如何将蓝色圆圈更改为绿色符号。你能帮帮我吗？

 .blog-blau-liste {
    position: relative;
    margin: 0.8em 0px 0px;
    list-style: outside none none;
    counter-reset: big-numba;
    padding-left: 0px;
}

.blog-blau-liste-item {
    position: relative;
    margin: 0.8em 0px 0px 1.9em;
    list-style: outside none none;
}

.blog-blau-liste-item::before {
    content: counter(big-numba, decimal);
    counter-increment: big-numba;
    position: absolute;
    top: -2px;
    font-size: 19px;
    left: -1.9em;
    box-sizing: border-box;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5;
    color: #FFF;
    background: #009DD9 none repeat scroll 0% 0%;
    font-weight: 600;
    text-align: center;
    border-radius: 50%;
}

    <ol class="blog-blau-liste">
	<li class="blog-blau-liste-item">Punkt Nummer 1</li>
	<li class="blog-blau-liste-item">Punkt Nummer 2</li>
	<li class="blog-blau-liste-item">Punkt Nummer 3</li></ol>

有没有办法这样做并用css构建这个绿色标志（只有这种没有文字和白线的圆圈）？

我找到了这段代码，但它不是四舍五入的，我不知道如何整合它。

#burst-8 {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
    -webkit-transform: rotate(20deg);
       -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
         -o-transform: rotate(20eg);
}
#burst-8:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
}

<div id="burst-8">1</div>

Answer 1

使用::after 和::before 伪元素重新创建形状

这种方法结合了我之前编写的两种方法（请参阅下面的旧答案）。唯一的限制是您只能有 8 个面，否则您需要在每个 li 内创建额外的 HTML 元素。这是最干净的方法恕我直言：

.vegan-list {
    list-style: none;
    counter-reset: vegan-list-number;
}

.vegan-list li { position: relative; margin-bottom: 20px;}

.vegan-list li::before, .vegan-list li::after {
  content: '';
  display:inline-block;
  vertical-align: middle;
  height: 50px;
  line-height: 50px;
  width: 50px;
  background: green;
  border-radius: 10px;
  font-size: 2em;
  color: #FFF;
  text-align: center;
}

.vegan-list li::before {
  content: counter(vegan-list-number, decimal);
  counter-increment: vegan-list-number;
  margin-right: 20px;
}

.vegan-list li::after {
  content: '';
  z-index: -1;
  position: absolute;
  left: 0;
  transform: rotate(45deg);
}

<ol class="vegan-list">
  <li>Punkt Nummer 1</li>
  <li>Punkt Nummer 2</li>
  <li>Punkt Nummer 3</li>
</ol>

jsFiddle: https://jsfiddle.net/azizn/Lda7hwkj/

如您所见，转换应用于::after 元素，因此数字不受影响。添加z-index: -1 确保::after 不与::before 重叠。

---

原答案：

您可以将图像作为背景应用到每个li 的::before pseduo 元素：

.vegan-list {
    list-style: none;
}

.vegan-list li::before {
  content: '';
  display:inline-block;
  vertical-align: middle;
  height: 50px;
  width: 50px;
  background: url("http://i.stack.imgur.com/qWoRZ.png") no-repeat center;
  background-size: contain;
  margin-right: 10px;
}

<ol class="vegan-list">
  <li>Punkt Nummer 1</li>
  <li>Punkt Nummer 2</li>
  <li>Punkt Nummer 3</li>
</ol>

jsFiddle：https://jsfiddle.net/azizn/ffyrhu7o/

---

编辑：如果您想用纯 CSS 重新创建该形状，您可以使用 border-radius 使边缘圆润/平滑：

body {margin:3em;}

.burst {
  background: green;
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 2em;
  color: #FFF;
  position: relative;
  text-align: center;
  border-radius: 10px;
}

.burst::before, .burst::after {
  content: "";
  position: absolute;
  z-index:-1;
  top: 0; left: 0; bottom: 0; right: 0;
  background: inherit;
  border-radius: inherit;
  transform: rotate(27deg);
}

.burst::after {
  transform: rotate(-30deg);
}

<div class="burst">1</div>

玩弄它 - jsfiddle：https://jsfiddle.net/azizn/r3wtjemr/

Answer 2

ol{ 
    list-style-image: url("YourImage.png") 
}

Answer 3

您可以在每个句子之前添加这个 png 图片。 它不会对您的页面花费太多，而且会简单得多。 您将能够根据需要自定义它。 如果你想让它动态化，你可以使用：

• 类属性+Jquery（以before为例）
• ul list-style-image
• 甚至像你之前那样使用 css > 见 this related post

Answer 4

    .vegan-list {
        list-style: none;
      counter-reset: section;
    }

    .vegan-list li::before {
       counter-increment: section;
    content: counter(section);
      display:inline-block;
      vertical-align: middle;
      height: 50px;
      width: 50px;
      background: url("http://i.stack.imgur.com/qWoRZ.png") no-repeat center;
      background-size: contain;
       line-height: 50px;
    text-align: center;
    font-size: x-large;
    color: brown;
    }

    <ol class="vegan-list">
      <li>Punkt Nummer 1</li>
      <li>Punkt Nummer 2</li>
      <li>Punkt Nummer 3</li>
    </ol>