css实现的时间线

在一个英文博客上看到用css实现的时间线，看着还是很简单的，写个demo记录下。

<style>
  .events::before {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: 1px;
    left: 50%;
    background: rgb(130, 129, 129);
  }

  .events {
    position: relative;
    margin: 0.5em;
    display: flex;
    flex-direction: column;
    row-gap: 1em;
  }

  .event {
    display: flex;
    align-items: baseline;
  }

  .event:is(.version, .work, .projects) {
    flex-direction: row-reverse;
  }

  .event .content {
    /* 设置盒子模型：宽度width包括padding值 */
    box-sizing: border-box;
    width: 50%;
    text-align: right;
    padding: 1em;
  }

  .event:nth-child(even) .content {
    text-align: left;
  }

  .event .marker {
    position: relative;
    left: -6px;
    top: 0px;
    order: 1;
  }

  .event:nth-child(even) .marker {
    left: 6px;
  }

  .event.learn .marker {
    fill: yellow;
  }

  .event.version .marker {
    fill: magenta;
  }

  .event.new .marker {
    fill: red;
  }

  .content time {
    font-weight: bold;
  }
</style>
<div class="timeline">
  <div class="events">
    <div class="event learn">
      <svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
        <circle cx="6" cy="6" r="6"></circle>
      </svg>
      <div class="content">
        <time>2015</time>
        <div class="text">开始学习</div>
      </div>
    </div>
    <div class="event version">
      <svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
        <circle cx="6" cy="6" r="6"></circle>
      </svg>
      <div class="content">
        <time>2019</time>
        <div class="text">发布版本1</div>
      </div>
    </div>
    <div class="event new">
      <svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
        <circle cx="6" cy="6" r="6"></circle>
      </svg>
      <div class="content">
        <time>2024</time>
        <div class="text">新的一年</div>
      </div>
    </div>
  </div>
</div>