// This programatically counts and numbers all the lines in the poem // by setting the start attribute for each <ol> $(function () { var counter = 1; $('.poem ol').each(function () { $this = $(this); $this.attr('start', counter); counter += $(this).find('li').length; }); });
<div class="poem"> <h1>Do Not Go Gentle Into That Good Night</h1> <h2>by Dylan Thomas</h2> <ol> <li>Do not go gentle into that good night,</li> <li>Old age should burn and rave at close of day;</li> <li>Rage, rage against the dying of the light.</li> </ol> <ol> <li>Though wise men at their end know dark is right,</li> <li>Because their words had forked no lightning they</li> <li>Do not go gentle into that good night.</li> </ol> <ol> <li>Good men, the last wave by, crying how bright</li> <li>Their frail deeds might have danced in a green bay,</li> <li>Rage, rage against the dying of the light.</li> </ol> <ol> <li>Wild men who caught and sang the sun in flight,</li> <li>And learn, too late, they grieved it on its way,</li> <li>Do not go gentle into that good night.</li> </ol> <ol> <li>Grave men, near death, who see with blinding sight</li> <li>Blind eyes could blaze like meteors and be gay,</li> <li>Rage, rage against the dying of the light.</li> </ol> <ol> <li>And you, my father, there on the sad height,</li> <li>Curse, bless, me now with your fierce tears, I pray.</li> <li>Do not go gentle into that good night.</li> <li>Rage, rage against the dying of the light.</li> </ol> </div>
.poem ol { list-style-type:none; margin:0 0 10px 30px; padding:0; } .poem ol li { text-indent:-30px; padding-left:30px; margin:0; } .poem ol li:hover { list-style-type:decimal; } h1 { font-size:1.4em; font-weight:normal; margin:0 0 10px 30px; } h2 { font-size:1em; font-weight:normal; margin:0 0 30px 30px; font-style:italic; }