CSS 時間軸
<!DOCTYPE html>
<html>
<head>
<title>css timeline20200423</title>
<meta http-equiv=」Content-Type」 content=」text/html; charset=utf-8″>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>.events li {
display: flex;
}
.events time {
position: relative;
color: #ccc;
padding: 0 1.5em; }
.events time::after {
content: "";
position: absolute;
z-index: 2;
right: 0;
top: 0;
transform: translateX(50%);
border-radius: 50%;
background: #fff;
border: 4px #38b48b solid;;
width: 1.5em;
height: 1.5em;
}
.events span {
padding: 0 1.5em 1.5em 1.5em;
position: relative;
}
.events span::before {
content: "";
position: absolute;
z-index: 1;
left: 0;
height: 100%;
border-left: 2px #3a3333 dashed;
}
.events strong {
display: block;
font-weight: bolder;
font-size: 22px;
color: #545454;
}
.events { margin: 1em; width: 50%; }
.events,
.events *::before,
.events *::after { box-sizing: border-box; font-family: arial; }</style>
</head>
<body>
<ul class="events">
<li>
<time datetime="10:03">10:03</time>
<span><strong>Bat & Ball</strong> On time</span></li>
<li>
<time datetime="10:03">10:03</time>
<span><strong>Bat & Ball</strong> On time</span></li>
<li>
<time datetime="10:03">10:03</time>
<span><strong>Bat & Ball</strong> On time and other text that may span over 2 lines</span></li>
<li>
<time datetime="10:03">10:03</time>
<span><strong>Bat & Ball</strong> On time</span></li>
<li>
<time datetime="10:03">10:03</time>
<span><strong>Bat & Ball</strong> On time</span></li>
<li>
<time datetime="10:03">10:03</time>
<span><strong>Bat & Ball</strong> On time</span></li>
</ul>
</body> </html>