I have a layout of list items arranged in 2 columns, separated by a bottom margin after every 'row' of 2 items.
While it's simple to add a left border to every even list item...
I am curious if it's achievable to extend the border so that it forms a continuous vertical line reaching the height of the second column.
Furthermore, I prefer not to utilize bottom padding on the list items because it causes the separator to protrude below the list item.
This is my current progress:
(This works as intended)
(However, this is not ideal as the bottom margin of the items interferes with the silver line)
Markup:
<ul>
<li></li><li></li><li></li>
</ul>
CSS:
ul
{
list-style: none;
width: 220px;
background: wheat;
}
li
{
display:inline-block;
background: pink;
width: 100px;
height: 100px;
margin-bottom: 25px;
position: relative;
}
li:nth-child(even)
{
margin-left: 18px;
}
li:nth-child(even):before
{
content: '';
position: absolute;
left: -11px;
top:0;
width: 4px;
height: 100%;
background: silver;
}