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


Tags: css,html-lists

Problem :

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.



Solution :

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

    CSS Howto..

    How to set font style light?

    How can I change css stylesheet with dart?

    How to zoom content to screen width

    How to change asp:DropDownList extended background color ? CSS class

    How to make the background of my text larger?

    How to make a background with 45 degree lines with css?

    How can I prevent overflow from a fieldset?

    How to make my footer always stay at the bottom of the page, even when the page content is smaller than the screen?

    Website Content Shown on Moz but not Chrome

    How to make the divs fill the remaining space without using float?

    Capybara/CSS: How to find an input field by label AND value?

    How do I make this menu using only HTML and CSS

    How do I use CSS to select for a tag with arbitrary name attribute?

    How to include transparency in html/css?

    CSS frustration: How to center floating images of different widths inside LI tags?

    How to reuse styles?

    How to detect IE8 separate from newer versions when IE8 compatibility set

    Bootstrap: how to clear images in a gallery?

    How to apply CSS changes for the last

    element of the 3rd div class span8

    How to use Border Radius CSS on Internet Explorer

    Magento - how to locate the location of inline css

    How to control number of items per row using media queries in Flexbox?

    How to embed css in xml?

    How to create a dropdown with lu and li tags like this

    In CSS, how to make the colored background be at least 50% of pagewidth and at most 90%, and as wide as necessary?

    How to locate Element via CSS Selector/XPath?

    CSS: how to vertically and horizontally align an image?

    html css: how to draw dotted box around
    ?

    How Can I Override Style Info from a CSS Class in the Body of a Page?

    background image not showing on nested