如何用纯CSS为字符串前2个字符设置单独样式？（无法修改HTML）

针对无法修改HTML结构的场景，要给 <h4 class="date">10 Mar. 2022</h4> 的前2个字符设置差异化样式，可根据需求选择以下方案：

一、仅修改字符颜色（适配动态文本） #

如果只需区分颜色，利用 background-clip: text 和 ch 单位就能实现，无需依赖固定内容：

.date {
  font-size: 1rem;
  /* 线性渐变划分颜色区域，前2ch为目标色，其余为默认色 */
  background-image: linear-gradient(to right, #e63946 0 2ch, #1d3557 2ch);
  /* 将背景裁剪至文本范围 */
  background-clip: text;
  -webkit-background-clip: text; /* 兼容webkit内核浏览器 */
  /* 隐藏原文本颜色，让背景色生效 */
  color: transparent;
}

ch 单位代表当前字体下数字0的宽度，刚好适配日期日份这类等宽字符的场景，能精准覆盖前2个字符。

二、修改字体大小、粗细等复杂样式（仅适配固定内容） #

目前CSS没有原生伪元素支持选中前2个字符，若要实现字体大小、粗细这类样式差异，只能采用hack方案，且需要明确前2个字符的内容：

.date {
  position: relative;
  font-size: 1rem;
  color: #1d3557;
  /* 缩进隐藏原文本的前2个字符 */
  text-indent: -2ch;
  padding-left: 2ch;
  overflow: hidden;
}

.date::before {
  content: '10'; /* 替换为实际的前2个字符 */
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.5rem;
  font-weight: bold;
  color: #e63946;
  width: 2ch;
  text-align: left;
}

这个方案通过伪元素生成样式化的前2个字符，同时隐藏原文本对应部分，但仅适用于内容固定的场景。若文本是动态变化的，纯CSS暂时无法实现这类复杂样式差异，需借助JavaScript辅助。

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