如何用 CSS 创建 BBC 新闻风格的合并项目符号列表

1 .........

2.........

每当有直播活动时，BBC新闻通常会以“时间线”的形式列出所有报道。例如：

我很好奇他们是如何将列表项的项目符号通过一条线动态连接起来的，于是我使用我信赖的 Chrome DevTools 来解决这个问题。

而且，他们的加价真是太划算了！

长话短说，这是一个标准的 HTML 列表（BBC 使用的是<ol>，但我选择了<ul>），其中每个列表项（<li>）都有一个:before伪元素，该元素内容为空，但宽度标记为 2 像素，背景颜色为红色。这会在每个之前创建一条“线” <li>。之后，可以通过进一步的样式设置来定位这条伪元素/线。

CSS 的关键部分是伪元素：



li:before {
  background-color: #c00;
  width: 2px;
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 5px;
}

您还需要确保列表项本身使用relative定位，以便position: absolute伪元素不是基于页面，而是基于列表项本身：



li {
  /* You need to turn on relative positioning so the line is placed relative to the item rather than absolutely on the page */
  position: relative;

  /* Use padding to space things out rather than margins as the line would get broken up otherwise */
  margin: 0;
  padding-bottom: 1em;
  padding-left: 20px;
}

（另请注意，如果您现在想在行项目之间留出间隙，则需要使用填充，否则行会被边距打断！）

这些项目符号并非标准的 HTML 项目符号，而是用内联 SVG 绘制的圆圈。理论上，你可以使用任何形状（星形、正方形等等），甚至可以使用类似表情符号之类的符号，但我只是照搬了 BBC 使用的圆圈方法。

我不会用技术性的解释来烦扰您，而是将其归结为我能想到的最简单的代码示例，添加了大量注释，并将其放在 CodePen 上供您摆弄。

在这里玩一下：

后期添加：

Twitter 上的Saadat进一步扩展了上述概念，他通过使用:after伪元素将项目符号的 SVG 嵌入到 CSS 中！这使得代码更加简洁。他们的代码在这篇文章中，但关键在于：



/* Small bullets for normal list items */
li::after {
  content: '';
  position: absolute;
  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");
  background-repeat: no-repeat;
  background-size: contain;
  left: 0;
  top: 2px;
  width: 12px;
  height: 12px;
}

文章来源：https://dev.to/peterc/how-to-create-joined-bulletpoint-lists-with-css-bbc-news-style-1eem

如何使用 CSS 创建 BBC 新闻风格的连接项目符号列表 1 ......... 2.........

如何用 CSS 创建 BBC 新闻风格的合并项目符号列表

1 .........

2.........