CSSのみでタイムラインを制作する 自分用備忘録

自分用のCSS備忘録です。
本当に自分用なんで解説などは一切ありません。

<div class="timeline RRR">
  <div class="timeline__item">
    <div class="maru">
      <div class="m"></div>
    </div>
    <p class="name">題名<br>ダミーテキストダミーテキスト</p>
  </div>
  <div class="timeline__item">
    <div class="maru">
      <div class="m"></div>
    </div>
    <p class="name">題名<br>ダミーテキストダミーテキスト</p>
  </div>
  <div class="timeline__item">
    <div class="maru">
      <div class="m"></div>
    </div>
    <p class="name">題名<br>ダミーテキストダミーテキスト</p>
  </div>
  <div class="timeline__item">
    <div class="maru">
      <div class="m"></div>
    </div>
    <p class="name">題名<br>ダミーテキストダミーテキスト</p>
  </div>
  <div class="timeline__item">
    <div class="maru">
      <div class="m"></div>
    </div>
    <p class="name">題名<br>ダミーテキストダミーテキスト</p>
  </div>
  <div class="timeline__item">
    <div class="maru2">
      <div class="m"></div>
    </div>
    <p class="name">題名<br>ダミーテキストダミーテキスト</p>
  </div>
</div>

@charset "UTF-8";
*,*::before,*::after {box-sizing: border-box}
html{font-size:62.5%;}
body{font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;}
a:link,a:visited,a:hover,a:active{text-decoration: none;}

.RRR{
  width: 1200px;
  margin: 0 auto;
  margin-top: 100px;
}

.timeline{
  display: flex;
  justify-content: center;
  background-color: #eeeeee;
}
.timeline__item{
  width: 180px;
  text-align: center;
  font-size:18px;
}
.name{
  font-size:16px;
  width: 80%;
  margin: 0 auto;
}
.maru{
  position: relative;
  margin-bottom: 10px;
}
.m{
  width: 10px;
  height: 10px;
  border-radius: 50px;
  margin: 0 auto;
  border:1px solid #313131;
}

.maru:after {
  content: '';
  position: absolute;
  top: 50%;
  margin-left: 5%;
  display: inline-block;
  width: 90%;
  height: 1px;
  background-color: #313131;
}

.maru2{
  position: relative;
  margin-bottom: 10px;
}