一种令人耳目一新且简单的（但巧妙的）方法，使用一个简单的语义无序列表 (<ul>) 创建垂直时间轴，来自 Peter Cooper.
ol {
list-style-type: none;
}
li {
position: relative;
margin: 0;
padding-bottom: 1em;
padding-left: 20px;
}
li:before {
content: '';
background-color: #c00;
position: absolute;
bottom: 0px;
top: 0px;
left: 6px;
width: 3px;
}
li:after {
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32' focusable='false'%3E%3Ccircle stroke='none' fill='%23c00' cx='16' cy='16' r='10'%3E%3C/circle%3E%3C/svg%3E");
position: absolute;
left: 0;
top: 2px;
height: 12px;
width: 12px;
}Peter 在 BBC 新闻 网站上看到它被实现后得到了这个想法。那个版本使用了有序列表 (<ol>) 元素，如果我们正在处理特定顺序的事件，这是有意义的。Peter 的版本使用无序列表，这也可能一样好。
长话短说，它是一个标准的 HTML 列表（BBC 使用
<ol>，但我使用了<ul>），其中每个列表项 (<li>) 都有一个 :before 伪元素，该元素在内容方面为空，但标记为 2 像素宽，背景颜色为红色。这会在每个<li>之前创建“线”。进一步的样式然后定位这个伪元素/线。
在 :after 伪元素中添加 SVG 的巧妙且节省标记的做法来自于 Saadat。原始版本包括额外的背景属性来包含 SVG 的大小并防止其重复，但我发现它们在这个上下文中并不是完全必要。但是，请注意，SVG 标记正确地使用了 focusable 属性来防止它在键盘选项卡中被包含。好动作！👏
以下是结果
查看 Pen
无序列表作为连续垂直时间轴 由 Geoff Graham (@geoffgraham)
在 CodePen 上。
我很难想象一个时间轴，其中顺序不重要，所以我觉得
<ol>更符合语义。我之前为年度报告做了一个时间轴，与之类似：https://codepen.io/bemdesign/pen/wMmZYo
同意。有序列表更适合时间轴。不过这个想法很好。
我的直觉也是这样。我已经改变了。
我仍然更喜欢在我的实验性周日历中使用无序列表
http://www.netools.it/web/calendar/week/
我知道这很傻，但也许添加一个 16x16px 的红色圆圈，左侧留出 7px 的垂直线，这样就可以居中了，因为它看起来并不居中，这让我很奇怪，哈哈。
哈哈！我理解你的意思。我已经稍微调整了一下，让它们更均匀。
使用
list-type-image和border-left怎么样？有趣！我相信它也可以使用默认的项目符号样式完成，从而省去了对其中一个伪元素的需要。
如果交换“after”和“before”语句，你会得到一个多行内容的解决方案。
你为什么要加载 SVG 来表示点？使用 CSS 不更好吗？
li:after {
background-color: red;
border-radius: 50%;
content: ”;
height: 8px;
left: 3px;
position: absolute;
top: 5px;
width: 8px;
}
我怎样才能改变时间轴上点的颜色？
很棒的文章