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 have elements with different background-colors yet the background-image shows everywhere (aka, a watermark)?

    How to negate conjunction of two attributes in CSS selector

    How to get the element background image in html using javascript

    How to rearrange these elements with CSS?

    How do i put text under an img icon in a menu?

    How to keep indent for second line in ordered lists via CSS?

    Foundation 6: How to set .is-open-right translateX value with JavaScript

    How to make CSS column not be forced down

    How to Move Parent Div Position using css on hover

    How to change CSS display property using an anchor tag?

    How to change text direction of every line of text using javascript/jquery?

    How to create a table with CSS [closed]

    How to trigger one element inside a div on mouse hover in CSS

    How can I make the height of a div section to automatically adapt to the height of its content?

    How to place text/content below Navbar in CSS/HTML

    How to parse css (stylesheet) comments (annotations)?

    wordpress submenu css show on parent active and child active

    How to make image clickable if -1 z-index is given to create box-shadow?

    How do I stagger divs like Google Plus?

    How do I use “:nth-of-type” to select an element after the element is updated by jQuery?

    How to change scroll bar position with CSS?

    How to override the slide effect to dissolve effect in JQuery Mobile using CSS3 feautures?

    How can i make the horizontal navigation menu center aligned

    How to implement .SCSS on my own website? [closed]

    How to tell what is the right css line to apply in nested classes

    How to override default styles in GWT 2.3?

    How to blink a text on button in IE ,chrome etc using JQuery or CSS

    How to write function in css

    MVC How make a logout button

    How to get CSS pseudo-elements to look the same cross browser?