Is a persistent left border / divider only on the even-numbered items in the list?

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)

FIDDLE

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;
}

Answer №1

Is this to your liking?

I made adjustments to the li:before to account for the entire height, including the margin of the li, using padding-top

Afterwards, I repositioned it higher (top:-30px;) so that only the next even li has a separator. This caused the separator to overflow the ul, so I applied overflow:hidden

Check out the FIDDLE

CSS:

*
{
    margin:0;padding:0;
}
ul
{
    list-style: none;
    width: 220px;
    background: wheat;
    overflow:hidden;
}
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:-30px;
    width: 4px;
    height: 100%;
    background: silver;
    padding-top:30px;
}

Answer №2

An innovative approach I would take is to group all items on the left side within one div, and the items on the right side in another div, applying unique styles to each.

.right,.left{
float:left; 
}
.left{
 border-right:2px solid grey; 
}

ALTERNATIVE APPROACH:

To enhance the visual appeal of your code, consider replacing the following lines with the new code snippet below:

li:nth-child(even):before
{
    content: '';
    position: absolute;
    left: -11px;
    top:0;
    width: 4px;
    height: 100%;
    background: silver;
}

Replace it with...

li:nth-child(odd):after
{
    content: '';
    position: absolute;
    right: -11px;
    top:0;
    width: 4px;
    height: 130%;
    background: silver;
}

//For a customized appearance based on your preferences

li:last-child:after{
content: '';
    position: absolute;
    right: -11px;
    top:0;
    width: 4px;
    height: 100%;
    background: silver;
}
li:last-child:after
{
    content: '';
    position: absolute;
    right: -11px;
    top:0;
    width: 4px;
    height: 130%;
    background: transparent;
}

li:nth-last-child(3):after
{
    content: '';
    position: absolute;
    right: -11px;
    top:0;
    width: 4px;
    height: 100%;
    background: silver;
}    

Answer №3

Yes, it can be done. I had to wrap each list item's content in a div with 90% height to create the desired margin at the bottom. Additionally, two style rules were added to create silver lines between items.

li:nth-child(even):not(:nth-last-child(1)):not(:nth-last-child(2)):before
{
    content: '';
    position: absolute;
    left: -11px;
    top:10;
    width: 4px;
    height: 100%;
    background: silver;
}
li:nth-child(even):nth-last-child(1):before,
li:nth-child(even):nth-last-child(2):before
{
    content: '';
    position: absolute;
    left: -11px;
    top:10;
    width: 4px;
    height: 90%;
    background: silver;
}

Check out the live demo here: http://jsfiddle.net/er144/mUAPT/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Initial page load experiencing issues with paroller.js functionality

Upon hard refreshing the page in the middle section, there seems to be an issue with the paroller js transform: translateY(); CSS effect not functioning properly on the <div class="col col-6" data-paroller-factor="0.4" data-paroller-type="foreground" da ...

The html viewport size is altered by the mobile keyboard

One issue that arises when using percentage or viewport unit width and height for the <body> element is that the size of these elements will change when a mobile keyboard is invoked due to an input. I have extensively researched this problem without ...

Create a sleek and innovative tree user interface in a single line with the power of Angular and fxF

I created a tree with parent and child nodes, but I'm facing an issue where the positions of the checkboxes are not aligned in a straight line. Here is my code snippet: <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle> ...

Angular: facing difficulty displaying static html pages on server, although they render correctly when run locally

Within my Angular project, I have stored a few static html files (specifically sampleText.html) in the src/assets/html folder. In one of my components, I am attempting to fetch and display this file. The following code is being used for this purpose. Every ...

Verifying that the class name prefix aligns with the folder name using Stylelint

Currently, I am utilizing the "selector-class-pattern" rule from stylelint. My chosen pattern enforces the ECSS naming convention. The specific rule configuration is outlined below: "selector-class-pattern": ["^[a-z]([a-z0-9]){1,3}-[A-Z][a-zA-Z0-9]+(_[A-Z ...

Resizing SVG to specify width in pixels and automatically adjust height

I'm having trouble understanding how SVG works. Can someone explain where my mistake is? Here's an example of my inline SVG code: <div style="width:1000px; height:auto; background-color:blue;"> <svg class="_image"><use xlink ...

Using jQuery to upload an image onto a canvas

When dealing with certain dependencies, I found myself needing to upload images of size 670 X 525 px to the server (regardless of the original size uploaded by users). To achieve this, I decided to draw the image onto a canvas canvasContext.drawImage(0, 0 ...

A guide on extracting data from a Script element in an HTML file and saving it to a CSV file using Python Selenium

Looking for help with optimizing a Python script that extracts data from the Script tag on an HTML web page. The current output saved in a CSV file is not meeting my requirements: (1) the format is incorrect, and (2) there is unnecessary content included. ...

Is there a way to trigger both the link and the div element simultaneously?

Is there a way to make both the button and the link light up simultaneously when hovering over the div element, instead of just the button lighting up first? <div id="b1"; class = b> <a href="test.html">BUY</a> < ...

Every time I try to access my project by logging in, an error occurs and I am redirected back to the base URL

There is an error that occurs when I try to log in to my project and then go to the base URL. The error message is displayed below: https://i.sstatic.net/lJq7S.png Here is the URL for My Login page https://i.sstatic.net/MtY7Z.png After logging in, if I ...

query in PHP to display specific data

Seeking guidance for developing a document tracking system using PHP. Struggling with defining the correct title for my project and unable to generate relevant keywords for search queries. The main issue pertains to determining how the system can validat ...

What is preventing me from using JavaScript to remove this class?

Struggling to implement a skeleton loading screen with CSS classes and JavaScript. The idea is to apply the 'skeleton' class to elements, style them accordingly, then remove the class using a timeout set in JavaScript. However, I'm encounter ...

How can I indicate to the browser that the HTML page should be accessed through SSL?

I've set up a certificate on my website. Now, I only want one specific page to be accessed through SSL. Do I need to add any markup on the page itself, or is there another setting elsewhere that I should use? ...

Adding a border in jQuery or Javascript to highlight empty form fields

After making the decision to dive into the world of Javascript, I've been dedicated to perfecting a script that will encase empty elements with a border right before the user submits a form. My ultimate goal is to implement live validation in the form ...

What is the best method for applying classes to a collection of DOM elements with jQuery?

I attempted two different methods of iterating through the arrays, but encountered the same error: addClass is not function First attempt using a for loop: function game(){ var cards = $('.card'); function initialize(){ for ...

Having an issue with HTML and JavaScript where the button won't open when pressed. Any help is appreciated

https://jsbin.com/haluhifuqe/edit?html,js,output I'm facing an issue with my HTML & JavaScript code - when I click the button, it doesn't open. Can anyone help me out? <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

Experiencing problems with jQuery drop-down menus - added arrows to menu links, but menu disappears when arrows are hovered over

My website has a drop-down menu implemented using jQuery, and it works well. However, I'm facing an issue where I want to add an arrow to the links that have sub-menus. The problem is that when you hover over this arrow, technically you're not ho ...

Modify the background's color and incorporate a pointlight using three.js

Recently, I have been exploring the capabilities of three.js. One interesting challenge I encountered was creating a cube within a wireframe cube. However, I found myself struggling to alter the background color in my project. I believe that incorporating ...

What is the best way to pass a CSS root constant to a separate CSS file?

In my Angular test project, I'm experimenting with using the same colors repeatedly. To achieve this, I created a constants.css file where I defined all my root constants, which currently consist of colors. However, I've hit a roadblock when atte ...

What methods can I use to emphasize three distinct dates?

I'm facing difficulty highlighting three specific dates: "10-11-2020", "22-11-2020", and "07-11-2020" using React.js and Datepicker. Unfortunately, my attempts have not been successful so far. Here is the code snippet I am working with: import React, ...