Line between List items

Description

• line between list items
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Make sure you use Simple List with 2 Columns

#1.2. Hover on top right of section > Click EDIT SECTION

#1.3. at Format > Anchor Link > enter word: line-items

#1.4. Next, use this code to Custom CSS

section#line-items {
    .user-items-list-simple {
  --line-color: #d6d0c4;
  --line-thickness: 1px;
  --number-color: #9c463a;
  --number-size: .8rem;
  --number-gap: 1.2rem;
  --block-pad: 2.5rem;
  --col-inner-gap: 3rem;
  --edge-inset: 2rem;
  --edge-inset-mobile: 0px;

  position: relative;
  counter-reset: sqsListItem;
  align-items: stretch;
}

.user-items-list-simple::before,
.user-items-list-simple::after {
  content: "";
  position: absolute;
  left: var(--edge-inset);
  right: var(--edge-inset);
  height: var(--line-thickness);
  background: var(--line-color);
  pointer-events: none;
}
.user-items-list-simple::before { top: 0; }
.user-items-list-simple::after { bottom: 0; }

.user-items-list-simple > .list-item {
  position: relative;
  counter-increment: sqsListItem;
  padding-top: var(--block-pad);
  padding-bottom: var(--block-pad);
}

.user-items-list-simple[data-num-columns="2"] > .list-item:nth-child(odd) {
  padding-right: var(--col-inner-gap);
}
.user-items-list-simple[data-num-columns="2"] > .list-item:nth-child(even) {
  padding-left: var(--col-inner-gap);
}

.user-items-list-simple[data-num-columns="2"] > .list-item:nth-child(even)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--line-thickness);
  background: var(--line-color);
  pointer-events: none;
}

.user-items-list-simple[data-num-columns="2"] > .list-item:nth-child(n+3)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--line-thickness);
  background: var(--line-color);
  pointer-events: none;
}

.user-items-list-simple .list-item-content__title::before {
  content: counter(sqsListItem, upper-roman);
  display: block;
  color: var(--number-color);
  font-size: var(--number-size);
  line-height: 1;
  letter-spacing: .15em;
  margin-bottom: var(--number-gap);
}

@media (max-width: 640px) {
  .user-items-list-simple[data-num-columns="2"] > .list-item:nth-child(odd),
  .user-items-list-simple[data-num-columns="2"] > .list-item:nth-child(even) {
    padding-left: 0;
    padding-right: 0;
  }
  .user-items-list-simple[data-num-columns="2"] > .list-item:nth-child(even)::after {
    display: none;
  }
  .user-items-list-simple[data-num-columns="2"] > .list-item:nth-child(n+2)::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--edge-inset-mobile);
    right: var(--edge-inset-mobile);
    height: var(--line-thickness);
    background: var(--line-color);
    pointer-events: none;
  }
  .user-items-list-simple[data-layout-width="full"] {
    padding-left: 6vw !important;
    padding-right: 6vw !important;
}
.list-item-content__description {
    max-width: 100% !important;
}}}

#1.5. You can update style here (line 03 – line 11)

--line-color: #d6d0c4;
--line-thickness: 1px;
--number-color: #9c463a;
--number-size: .8rem;
--number-gap: 1.2rem;
--block-pad: 2.5rem;
--col-inner-gap: 3rem;
--edge-inset: 2rem;
--edge-inset-mobile: 0px;

#1.6. If you need to tweak more you can use this AI Assistant (designed for Squarespace sites)