如何使用CSS伪元素为.note类的首个和末尾元素添加文本

你只需要额外补充以下CSS代码即可实现需求，以给第一个.note元素前加文本「首」、最后一个.note元素后加文本「尾」为例：

/* 选中第一个.note元素，用:before伪元素添加前置文本 */
.note:first-child::before {
  content: "首";
  /* 以下是可选样式调整，可按需修改 */
  color: #fff;
  margin-right: 4px;
  font-size: 12px;
}

/* 选中最后一个.note元素，用:after伪元素添加后置文本 */
.note:last-child::after {
  content: "尾";
  /* 以下是可选样式调整，可按需修改 */
  color: #fff;
  margin-left: 4px;
  font-size: 12px;
}

注意事项 #

• 伪元素的content属性是必填项，即使你需要插入空内容也要写content: ""，否则伪元素不会生效
• 当前示例用的是标准双冒号写法::before/::after，单冒号:before/:after也兼容旧浏览器，可按需选择
• :first-child/:last-child匹配生效的前提是.note确实是父容器.wrap的首个/末个直接子元素，你提供的HTML结构完全符合该条件，直接使用即可
• 如果你需要调整添加的文本位置，也可以给伪元素加定位、边距等属性自定义样式

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