1

I have a piece of the markup that is created by 3rd user. And I have to apply some basic styles for that markup acccroding to the design.

Here is the markup:

body{
  color: rgba(42, 39, 52, 1);
  font-size: 18px;
}

ul, ol {
    margin: 0 0 20px 0;
}

ul, ol {
    padding-left: 30px;
    list-style-position: inside;
}
<ol>
 <li>This is Photoshop's version of Lorem Ipsum and numeric list</li>
 <li>This is Photoshop's version of Lorem Ipsum and numeric list</li>
 <li>This is Photoshop's version of Lorem Ipsum and numeric list</li>
 <li>This is Photoshop's version of Lorem Ipsum and numeric list</li>
</ol>

I'm trying to apply different font-size to number of the list item and to the text itself. Is it possible with the markup I have?

Thanks in advance

Andrey
  • 5,906
  • 4
  • 24
  • 30

1 Answers1

1

If you are trying to give different size to the numbers try this http://jsfiddle.net/efe1n7we/

ol {
list-style-type: none;
counter-reset: ol-counter;
}
ol li:before {
font-size:50px;
content: counter(ol-counter);
counter-increment: ol-counter;
}
Akshay
  • 14,138
  • 5
  • 46
  • 70