height: 100% on :before - Is it possible?

Question

I have an ordered list inside a div and I would like there to be a left border on the list items. I thought a simple border-left: 5px solid red; would do the trick, but I want the border on the left of the list numbers. I've tried to get it to work with li:beforebut I can't seem to get the height right.

Is there a way to do this with :before or maybe an easier way?

What I have so far http://jsfiddle.net/q5yS6/

Answer 1

height on :before works the same as it does with other elements. A percentage height can only be set if the parent has a set height. In this case, the parent of the :before element is the element it is before. So you would need to add a height to your li in order to have your :before element use a percentage height:

http://jsfiddle.net/q5yS6/6/

.lists ol li {
    overflow: hidden;
    height: 35px;
}

.lists ol li:before {
    content: " ";
    display: block;
    float: left;
    height: 100%;
    border-left: 5px solid red;
    padding-left: 20px;
}

Another option to achieve the desired effect would be to set the li to position: relative and the :before to absolute. You would need to remove the overflow: hidden though. You could use list-style: none to again hide the numbering:

http://jsfiddle.net/q5yS6/5/

.lists ol li {
    position: relative;
    list-style: none;
}

.lists ol li:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30px;
    border-left: 5px solid red;
    padding-left: 20px;
}

The use of top: 0 and bottom: 0 give the effect of 100% height.

Answer 2

You can simply use display: flex for the parent, and align-items: stretch to apply the same height to all childs.

Very good doc about CSS flexbox here : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

li {
    display: flex;
    align-items: stretch;
    margin-bottom: 10px;
}

li::before {
    content: '';
    display: block;
    width: 5px;
    background-color: red;
    margin-right: 10px;
}

li p {
    font-size: 15px;
}

<ol>
    <li>List 1</li>
    <li>List 2 <br> More on that</li>
    <li>List 3</li>
</ol>