自定义有序列表样式 [英] customize ordered list-style

问题描述

嘿，我正在尝试修改ol列表样式，就像该图片中另一个网站已经准备就绪一样.

Hey there I am trying to modify the ol list style like in that picture another website is allready dooing.

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

But with another CSS Image instead of the circle like the form (without text) in that picture

我尝试了以下代码来重建其他网站的工作，但是我不知道如何将蓝色圆圈更改为该绿色符号.你能帮我吗?

I tried the following code to rebuild what the other website is dooing, but I have no idea how to change the blue circle into a that green symbol. Can you help me?

 .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建立绿色徽标(只有这种没有文字和白线的圆圈)?

Is there a way to do so and build this green logo (only this kind of circle without text and white line) with css?

我找到了这段代码，但是没有四舍五入，而且我不知道如何集成它.

I found this code but it is not rounded and I dont know how to integrate that.

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

推荐答案

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

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

Using ::after and ::before pseudo elements to recreate shape

This approach combines both methods I wrote earlier (see old answers below). The only limitation is that you can only have 8 sides, otherwise you'd need to create extra HTML elements inside each li. This is the cleanest approach IMHO:

.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不重叠.

As you can see, the transform is applied to the ::after element so that the number is not affected. Adding z-index: -1 makes sure that ::after does not overlap ::before.

原始答案:

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

You can apply the image as a background to each li's ::before pseduo element:

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

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

编辑:如果要使用纯CSS重新创建该形状，可以使用border-radius使其边缘变圆/平滑:

If you wanted to recreate that shape with pure CSS, you can use border-radius to have the edges rounded/smooth:

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/

play with it - jsfiddle: https://jsfiddle.net/azizn/r3wtjemr/

这篇关于自定义有序列表样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！