Is it possible to have a different font-size of list number and list inner text without using a wrapper for the text?

Question

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

Do you want a different size for both the list number and text respectively? or the text as a whole? — Master Yoda, Dec 22 '14 at 14:35
I need to have for example 36px for numbers and 18px for the texts right after numbers — Andrey, Dec 22 '14 at 14:41

score 1 · Accepted Answer · answered Dec 22 '14 at 14:40

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

answered Dec 22 '14 at 14:40

Akshay

14,138
5
46
70

Is it possible to have a different font-size of list number and list inner text without using a wrapper for the text?

1 Answers1