[分享]css列表相同日期显示

如果你有一个列表需要显示相同的日期，可以使用CSS来实现。例如，你有这样一个列表： 文章1 文章2 文章3 文章4 现在想要这个列表显示相同的日期，可以在CSS中加入以下代码：ul li:befor...

如果你有一个列表需要显示相同的日期，可以使用CSS来实现。例如，你有这样一个列表：

<ul>
  <li>文章1</li>
  <li>文章2</li>
  <li>文章3</li>
  <li>文章4</li>
</ul> 

现在想要这个列表显示相同的日期，可以在CSS中加入以下代码：

ul li:before {
  content: "2022-08-30"; /* 这里可以根据需要替换成你想要的日期 */
  display: inline-block;
  width: 6em;
  margin-right: 1em;
  text-align: right;
  color: gray;
} 

这段代码中，我们使用了:before伪元素来在每个列表项前加入日期。我们设置了日期的内容为"2022-08-30"，并且设置了日期块的宽度、外边距、文本对齐方式和颜色。通过设置display:inline-block来使日期块和列表项在同一行显示。

这样，每个列表项前就会显示相同的日期，如下所示：

• 2022-08-30 文章1

• 2022-08-30 文章2

• 2022-08-30 文章3

• 2022-08-30 文章4