нумерация списков средством css

#html #css

Доброго всем времени!
подскажите как сделать такую нумерацию на чистом css




.goals {
  counter-reset: num;
  list-style: none;
  font: 14px "Trebuchet MS", "Lucida Sans";
  padding: 0px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

.goals ol {
  list-style-type: decimal-leading-zero;
  /*background: #23b7a4;*/
}

.goals ol li {
  content: counter(item) ' ';
  /* Добавляем к числам скобку */
  counter-increment: item;
}

h3 {
  text-transform: uppercase;
}

  

    

      
Dedication to the customers
      
Integer vel lacus non dui ullamcorper venenatis. Aliquam vitae tristique
nisi, vitae ullamcorper risus.
    
    

      
working closely with our clients
      
Sed blandit nisi urna, sed pellentesque enim consectetur vitae. Suspendisse
ut vehicula nibh.
    
    

      
increase happiness
      
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend
laoreet euismod.
    
  





не могу понять как убрать точки у нумерации и украсить именно нумерацию, пробовал
создать нумерацию через content:counter(item); counter-increment:item, но не могу понять
как сделать 01, 02 и тд.
    

Ответы

Ответ 1

Можно сделать так:



body {
  margin: 0;
}
.goals {
  font: 14px "Trebuchet MS", "Lucida Sans";
  padding: 0;
  margin: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
h3 {
  text-transform: uppercase;
  line-height: 12px;
}
ol { 
  margin: 0;
  padding: 0;
  counter-reset: item;
  list-style-type: none;
}
li { 
  display: block;
}

li + li {
  margin-top: 1em;
}

li > * {
  margin-top: 0;
  margin-left: 60px;
}

li:before { 
  float: left;
  display: block;
  content: counter(item, decimal-leading-zero) " "; 
  counter-increment: item;
  background-color: #23b7a4;
  color: #fff;
  text-align: center;
  padding: 12px;
  font-size: 25px;
  margin-right: 10px;
}

  

    

      
Dedication to the customers
      
Integer vel lacus non dui ullamcorper venenatis. Aliquam vitae tristique
nisi, vitae ullamcorper risus. Integer vel lacus non dui ullamcorper venenatis. Aliquam
vitae tristique nisi, vitae ullamcorper risus.
    
    

      
working closely with our clients
      
Sed blandit nisi urna, sed pellentesque enim consectetur vitae. Suspendisse
ut vehicula nibh.
    
    

      
increase happiness
      
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend
laoreet euismod.
    
  



Ответ 2

Вот пример того что вы хотите. Это сделано с псевдоклассом :before.

Там нумерация происходит так. content: '0' counter(item);. 

Стили немного не то что на вашей картинке. Но принцип уже понятен. 

Стили можете оформить на ваш вкус.



.goals {
  counter-reset: num;
  list-style: none;
  font: 14px "Trebuchet MS", "Lucida Sans";
  padding: 0px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

.goals ol {
  list-style: none;
}

.goals ol li {
  /* Добавляем к числам скобку */
  counter-increment: item;
}
.goals ol li:before {
   float: left;
   margin-right: 10px;
   content: counter(item, decimal-leading-zero);
   background: #2CB3A4;
   border-radius: 2px;
   color: white;
   width: 50px;
   height: 50px;
   font-size: 32px;
   line-height: 50px;
   text-align: center;
 }


h3 {
  text-transform: uppercase;
}

  

    

      
Dedication to the customers
      
Integer vel lacus non dui ullamcorper venenatis. Aliquam vitae tristique
nisi, vitae ullamcorper risus.
    
    

      
working closely with our clients
      
Sed blandit nisi urna, sed pellentesque enim consectetur vitae. Suspendisse
ut vehicula nibh.
    
    

      
increase happiness
      
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend
laoreet euismod.
    
  



Ответ 3

Нумерацию именно списка так не получится стилизовать.
Можно просто убрать список и сделать цифры обычными блоками и стилизовать как душе
угодно)  



.number{
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #23b7a4;
  color: #fff;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  vertical-align: top;
}

.content-wrapper {
  margin-bottom: 10px;
}

.content {
  display: inline-block;
  width: 400px;
  margin-left: 15px;
  vertical-align: top;
}

.content__title {
  text-transform: uppercase;
  margin: 0;
}

    
01
    

      
Dedication to the customers
      
Integer vel lacus non dui ullamcorper venenatis. Aliquam
vitae tristique nisi, vitae ullamcorper risus.
    


    
02
    

      
working closely with our clients
      
Sed blandit nisi urna, sed pellentesque enim consectetur
vitae. Suspendisse ut vehicula nibh.
    


    
03
    

      
increase happiness
      
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nulla eleifend laoreet euismod.