自定义有序列表样式

Question

嘿那里我正在尝试修改ol列表样式，就像在那张图片中另一个网站已经完全没有了。

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

如您所见，转换应用于::after元素，以便不影响该数字。添加z-index: -1可确保::after不重叠::before。

原始答案：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

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

• 一个类属性+ Jquery（例如before）
• ul list-style-image
• 或者甚至在你之前使用css＆gt;见this related post

Answer 3

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

Answer 4

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;