如何为每个::before伪元素设置不同的内容？

嘿，你的思路其实已经找对方向啦！你当前用:first-of-type、:nth-of-type()这类伪类给不同h1的::before设置不同内容的方法是完全可行的，不过我可以给你两种更实用的方案，适配不同的场景需求：

方案一：优化固定数量的伪类写法（适合标题数量确定的场景） #

如果你的时间线标题数量是固定的，可以把公共样式抽离出来，让代码更简洁易维护：

/* 把所有::before的公共样式统一写在这里 */
.timeline h1::before {
  position: absolute;
  font-size: inherit;
  left: 0;
  color: #E82F3A; /* 颜色统一的话，不用重复写在每个伪类里 */
}

.timeline h1 {
  position: relative;
  color: #404C60;
  padding-left: 35px;
  font-size: 1.8rem;
}

/* 单独给每个标题的::before设置内容 */
.timeline h1:first-of-type::before {
  content: '01';
}
.timeline h1:nth-of-type(2)::before {
  content: '02';
}
.timeline h1:last-of-type::before {
  content: '03';
}

这种写法的好处是结构清晰，公共样式只写一次，后续修改基础样式时不用逐个调整。

方案二：用HTML data属性+CSS attr()函数（适合动态或数量不确定的场景） #

如果你的时间线标题可能动态增加，或者数量不固定，这种方法会更灵活——直接在HTML里给每个h1标记自定义数据，CSS通过attr()读取这些数据作为伪元素内容：

HTML 代码： #

<div class="timeline">
  <h1 data-index="01">你的第一个标题</h1>
  <h1 data-index="02">你的第二个标题</h1>
  <h1 data-index="03">你的第三个标题</h1>
  <!-- 后续新增标题时，只需要添加data-index属性即可，不用改CSS -->
</div>

CSS 代码： #

.timeline h1::before {
  position: absolute;
  font-size: inherit;
  left: 0;
  color: #E82F3A;
  /* 直接读取data-index属性的值作为伪元素内容 */
  content: attr(data-index);
}

.timeline h1 {
  position: relative;
  color: #404C60;
  padding-left: 35px;
  font-size: 1.8rem;
}

这种方案的优势在于扩展性极强：哪怕后续要加10个标题，也只需要在HTML里补充data-index，完全不用改动CSS代码，非常适合动态生成内容的场景。

如果需要给不同标题的::before设置不同颜色，还可以再加一个data-color属性，用attr(data-color)来设置颜色（现代浏览器都支持这个用法）。

内容的提问来源于stack exchange，提问作者Shabrina Fitri