Left border on li elements to mark active item - html

Question

I've searched for this and can't seem to find a decent solution.
I'm trying to make a left border on a given <li> element so it marks the active option. The effect I'm going for is similar to Gmail where they mark the open folder with a red border, e.g:
I inspected how it's done on Gmail but looks like a series of <div>'s. I'm just trying to do it with list items.
I have this: https://jsfiddle.net/5txj3dpe/2/
So my markup is straightforward - a set of list items, with a .active applied to the active element ("Item 2" in this case):
.list-container {
border:1px solid #ccc;
margin-left: 0;
padding-left: 0;
}
li {
list-style: none;
}
li.active {
border-left: 4px solid red;
}
<div class="list-container">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
I want to make it so that the red border is flush with the .list-container and there is some space between the red border and the text. Basically I want to make it look similiar to the Gmail screenshot.
Please can anyone advise how to do this. Is it possible with an unordered list, or do I need additional <div>'s, etc?

Answer 1

You need to remove the padding on the ul, not the div like you're doing. Then you can add padding to the li elements. Remember to subtract the size of the border from the padding of the active li:
.list-container {
border: 1px solid #ccc;
}
.list-container ul {
padding: 0;
list-style-type: none;
}
.list-container li {
padding-left: 20px;
}
.list-container li.active {
border-left: 4px solid red;
padding-left: 16px; /* 20px - 4px = 16px */
}
<div class="list-container">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>

Answer 2

We'll need to remove the browser's inherited padding from the ul, to make the elements flush with the container. Then we'll give all the li elements a transparent border, and change the border-left-color of the .active element to the desired color.
.list-container {
border: 1px solid #ccc;
margin: 0;
padding: 0;
}
.list-container ul {
padding: 0;
margin: 0;
}
li {
list-style: none;
padding: 5px 20px;
border-left: 4px solid transparent;
}
li.active {
border-left-color: red;
}
<div class="list-container">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>

Answer 3

You could also use box-shadow inset to achieve this.
https://jsfiddle.net/kL5n2d1e/
You should remove the padding from the ul and apply it to the li's this way you can use the border shadow to create the effect you need without moving anything in the flow of the document.
Alternatively you can just add padding to the li and this will also work.
.list-container {
border:1px solid #ccc;
margin-left: 0;
padding-left: 0;
}
ul {
padding:0;
}
li {
list-style: none;
padding: 1em;
}
li.active {
box-shadow: inset 3px 0px 0px red;
}
<div class="list-container">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>

Answer 4

You just need to play with padding and margin parameters to get this effect.
.list-container {
border:1px solid #ccc;
margin-left: 0;
padding-left: 0px;
}
li {
list-style: none;
padding-left:10px;
}
li.active {
border-left: 4px solid red;
margin-left: -4px;
}

Answer 5

The border should be always present. Just make it transparent if li is not active.
.list-container {
border:1px solid #ccc;
margin-left: 0;
padding-left: 0;
}
li {
list-style: none;
padding: 3px 8px;
border-left: 4px solid transparent;
cursor: pointer;
}
li.active {
border-color: red;
}
li:not(.active):hover{
border-color: #ccc;
}
<div class="list-container">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>