Как двигать круглые элементы timeline между собой на разное друг от друга расстояние(С помощью кода,а не скрулла)?

Question

[SLFCM308]

(То есть чтобы эти круглешки, которые на линии с двинуть самому так чтобы они стали по центру текста, который сверху)

<section class="timeline">
  <ol>
    <li>
      <div>
        <time>1934</time> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
      </div>
    </li>
    <li>
      <div>
        <time>1937</time> Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi.
      </div>
    </li>
    <li>
      <div>
        <time>1940</time> Proin iaculis, nibh eget efficitur varius, libero tellus porta dolor, at pulvinar tortor ex eget ligula. Integer eu dapibus arcu, sit amet sollicitudin eros.
      </div>
    </li>
    <li>
      <div>
        <time>1940</time> Proin iaculis, nibh eget efficitur varius, libero tellus porta dolor, at pulvinar tortor ex eget ligula. Integer eu dapibus arcu, sit amet sollicitudin eros.
      </div>
    </li>


</section>

.timeline {
  white-space: nowrap;
  overflow-x: hidden;
}

.timeline ol {
  font-size: 0;
  width: 100vw;
  padding: 250px 0;
  transition: all 1s;
}

.timeline ol li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  width: 220px;
  height: 0px;

  border: dashed 3px silver;

}

.timeline ol li:last-child {
  width: 280px;
}

.timeline ol li:not(:first-child) {
  margin-left: 14px;
}

.timeline ol li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  bottom: 0;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: white;
  border: 4px solid #fee133;
  z-index: 1;
  
}

Comments

[Дима Долготер]

пс. парень. мы не двигаем точки.

твои скруллы

[SLFCM308]

Дима Долготер, оно и видно по данному юмору.

[Дима Долготер]

SLFCM308, чел, ты в коде городишь непонятную дичь, пишешь скруллы, а потом упрекаешь людей за юмор? не надо так

Answer 1

[Дима Долготер]

в общих чертах
нужно сделать линию, можно с помощью after на ol и расположить ее посередине.
потом дать ей бордер топ пунктир и на ol флексами выровнять

.timeline ol {
  display:flex;
  justify-content:space-between; 
  font-size: 0;
  width: 100vw;
  padding: 250px 0;
  transition: all 1s;
  position:relative;
}
.timeline ol:after{
content:"";
width:100%;
  position:absolute;
  top:50%;
  height:1px;
    border-top: dashed 3px silver;
  left:0;
}