CODEWITHSUNDEEP
htmlcsshtml-lists
Sotiris K.
Sotiris K.

Reputation: 88

Manipulate the position of the number in an ordered list

I have the following HTML

<h1> Dummy title here</h1>
<ol>
<li>
<p>Dummy paragraph here with lots of lines...</p>
</li>
<li>
<p>Another dummy paragraph with lots of lines...</p>
</li>
</ol>

And I want to style it like the image shown. https://i.sstatic.net/P382R.jpg

The problem is that I cannot find a way to bring the numbers down to the paragraphs level. Instead they start from each paragraph's first line and I end up with an unwanted result.

Any guidance please?

**

EDIT

**

I believe I have come up with a possible solution, not 100% compliant with the standards as I use a pseudo-class but still it is a viable solution. So here it is.

Using the structure exactly as I described it in my question I have come up with the following CSS

ol {
list-style: none;
}
ol li {
counter-increment: item;
}
ol p:before {
content: counter(item);
font-size: 80px;
float:left;
margin-right:10px;
}

As sandeep requested, here's a jsfiddle http://jsfiddle.net/sm8AT/

Upvotes: 2

Views: 1160

Answers (1)

Steve Bergamini
Steve Bergamini

Reputation: 14600

What you can try is this. Style your ordered list with a very large font so that the numbers have a large font. Then style the paragraph within with a much smaller font. Something like this:

ol { font-size: 22px; }
ol p { font-size:  9px; }

Haven't tested this, but just a suggestion. You may also need to play around with the positioning of the paragraph as well.

Upvotes: 1

Related Questions