CODEWITHSUNDEEP
csshtml-lists
user1934286
user1934286

Reputation: 1762

How to insert line breaks between numbers and content in ordered list

I have a need to make ordered lists with a high level of customization.

One of the things I need is to put a line break between the numbers and the content.

Currently, the only way I know how to do this is to actually put the line break <br> as the first part of the content like this: 

<head>
<style type="text/css">
ol {
    counter-reset: li;
    list-style:none;
    border: solid 1px #000;
    width: 500px;
    margin: 0 auto;

}
li {
    text-align:center;
    margin-left: -2.5em;
    margin-bottom:.5em;
    color:#00F;
}
li:before {
    display: inline-block;
    content: counter(li);
    counter-increment: li;
    width: 2em;
    color:#F00;
}
</style>
</head>

<body>

<ol>
<li><br>Line 1
<li><br>ooooooooooooooooooooo|ooooooooooooooooooooo
<li><br>Lorem ipsum dolor sit amet, tristique lacus. Rhoncus wisi interdum massa imperdiet neque vestibulum, eget pretium vel, id consectetuer lacus mi, tempus mi, a libero libero. Urna at lacus lectus quis consectetuer, dolor arcu wisi convallis pede in luctus, nisl phasellus vivamus gravida, ultricies vestibulum. Facilisi erat fusce eget aut sed pede, vel ac posuere, et molestie, in morbi vivamus nisl pellentesque pellentesque wisi, ut nunc massa libero id rhoncus nascetur. Purus elit, nulla imperdiet sagittis scelerisque odio, neque sodales sollicitudin nec aliquam ut.
<li><br>Line 4
<li><br>Line 5
<li><br>Line 6
<li><br>Line 7
<li><br>Line 8
<li><br>Line 9
<li><br>ooooooooooooooooooooo|ooooooooooooooooooooo
</ol>

</body>

I would like a css method of inserting (or imitating the line break) instead of putting <br> before every <li>.

I am happy to look at simply js tricks to do this, but I would rather use css over the js.

Upvotes: 2

Views: 2363

Answers (1)

Oriol
Oriol

Reputation: 288080

Demo: http://jsfiddle.net/wXC58/

Just use display:block instead of inline-block, and remove width:2em:

li:before {
    display: block;
    content: counter(li);
    counter-increment: li;
    color:#F00;
}

Upvotes: 2

Related Questions