Add left border to list items, outside of bullet number

Question

I have an OL list of numbered LI items. I want to put a left border around each separate LI element. However, I am only able to put the border to the right of the bullet number, and I want it to the left.

Here's the http://jsfiddle.net/z7gkLnc7/

I want to keep the div wrapper around the LI elements.

<ol>
    <div class = "li_wrapper">
        <li>I am a line</li>
    </div>
    <div class = "li_wrapper">
        <li>I am a line</li>
    </div> 
</ol>

Styles:

.li_wrapper{
    font-size:20px;
    margin-top:10px;
}

li{
    border-left:red 2px solid;
}

FYI a `div` in an `ol` is not valid html, only `li` is permitted — Alex K., Dec 15 '14 at 12:05
the red lines are to the left of the numbers in your fiddle ? do you mean to the right — Billy, Dec 15 '14 at 12:10
In this thread it explains what can you do and how to target the bullets in OL and UL lists [Link to UL OL](http://stackoverflow.com/questions/1470214/change-bullets-color-in-a-list-without-span) — Sirmais, Dec 15 '14 at 12:16

score 4 · Accepted Answer · answered Dec 15 '14 at 12:10

4

Simply use:

Demo Fiddle

list-style-position: inside;

The list-style-position CSS property specifies the position of the marker box in the principal block box.

answered Dec 15 '14 at 12:10

SW4

69,876
20
132
137

So what's the difference between this and your original fiddle ? They are showing up exactly the same on my Computer, That's why I though you had got confused with the left and right..... – Billy Dec 15 '14 at 12:20

score 0 · Answer 2 · answered Dec 15 '14 at 12:06

0

Hay you can do it like this : Just change the padding-left, if you like the red line be more left.

.li_wrapper{
    font-size:20px;
    margin-top:10px;
}

li{
    border-left:red 2px solid;
    list-style-type: none;
    padding-left: 10px

}

answered Dec 15 '14 at 12:06

AngularLover

364
1
12

This removes the bullet, but I need the steps to be numbered. I made a jsfiddle of your solution, with bullets: http://jsfiddle.net/z7gkLnc7/1/ The red line is still not outside the bullet number. – user984003 Dec 15 '14 at 12:11

score 0 · Answer 3 · answered Dec 15 '14 at 12:12

0

You need to set list-style to decimal as well. Then it's exactly what you need.

li  {
  border-left:red 2px solid;
  list-style: decimal inside;     /*append this line*/
}

JSFIDDLE

answered Dec 15 '14 at 12:12

Kuba Rakoczy

3,954
2
15
16

score 0 · Answer 4 · answered Dec 15 '14 at 12:15

You can achieve this by removing the normal numbers and add a pseudo class.

ol {
    counter-reset: li; /* Initiate a counter */
    list-style: none; /* No default numbers */
    *list-style: decimal; /* Fallback for IE6/7 */
}

Then add a number before you your element in your li (for example wrap it in a span:

.li span:before{
    content: counter(li);
    counter-increment: li;
    /* Add your styles like border-left */
}

Roger Johansson wrote about that for further information!

score 0 · Answer 5 · answered Dec 15 '14 at 12:16

0

add content , like this

#one li::before{content:" ";border-left:2px solid red;}

<ol id="one">

        <li> I am a line</li>
    
        <li> I am a line</li>
    
</ol>

answered Dec 15 '14 at 12:16

Billy

2,448
1
10
13

Add left border to list items, outside of bullet number

5 Answers5

Demo Fiddle