Archive/Horizontal timeline/styles.css

.timeline ul {
  margin-left: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  overflow-x: scroll;
  row-gap: 31px;
  height: 100%;
  margin-bottom: 0;
  box-sizing: border-box;
  overflow-y: clip;
  background: white;
}
.timeline li {
  white-space: nowrap;
  display: inline;
  padding: 5px 0;
  box-sizing: border-box;
}
.timeline li {
  grid-row-start: 1;
  grid-row-end: 3;
  display: grid;
  grid-template-rows: 1fr 1fr;
  height: 100%;
}
.timeline li:nth-child(2n) > :first-child {
  grid-row-start: 2;
  border-top: 3px solid black;
  display: flex;
  flex-direction: column;
  justify-content: end;
  height: 100%;
  position: relative;
}
.timeline::before {
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: .8rem;
  left: 0;
  top: 0;
  background: linear-gradient(to right, white, transparent);
  border-radius: 8px 0 0 8px;
  z-index: 1;
}
.timeline {
  position: relative;
}
.timeline::after {
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: .8rem;
  right: 0;
  top: 0;
  background: linear-gradient(to left, white, transparent);
  border-radius: 3px;
}
.timeline li:nth-child(2n-1) > :first-child {
  border-bottom: 3px solid black;
  height: 100%;
  margin-bottom: 14px;
  position: relative;
}
.timeline li:first-of-type > :first-child {
  padding-left: .8rem;
}
.timeline li:last-of-type > :first-child {
  padding-right: .8rem;
}
.timeline li:nth-child(2n) > :first-child::before {
  content: '|';
  width: 100%;
  position: absolute;
  top: -7px;
  text-align: center;
  color: black;
  font-size: 14px;
}
.timeline li:nth-child(2n-1) > :first-child::after {
  content: '|';
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: -5px;
  left: 0;
  color: black;
  font-size: 14px;
}