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. http://i.imgur.com/fOhom.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?
**
**
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/
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.