display:flex;でhistoryページなどでよく使う装飾を施す

こんにちは。
画像を使わず、cssだけでhistoyページでよくつかう縦線の装飾します。

■完成したレイアウト

See the Pen history page decoration by 舟橋 幸太郎 (@koutafunahashi) on CodePen.

■HTML

<dl>
   <dt>2000年</dt>
   <dd>会社設立</dd>
   <dt>2002年</dt>
   <dd>東証一部上場</dd>
</dl>

■CSS
※細かい設定は適時変更ください

dl{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
dt,
dd{
    vertical-align: top;
    margin-bottom: 30px;
}
dt{
    position: relative;
    width: 10%;
}
dt::before{
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-color: #000;
    position: absolute;
    top: 4px;
    left: -18px;
}
dt::after{
    content: "";
    width: 2px;
    height: 100%;
    border-left: 2px solid #000;
    position: absolute;
    top: 18px;
    left: -15px;
}
dd{
    width: 90%;
}

今までは画像で表現してましたが、CSSで色々できるようになって楽になりました。

display:flex;は便利です。