CSS伪元素content属性内容中途修改字体大小与字体族问题咨询

可以实现该需求，你当前使用单个::after伪元素的写法无法给content内的不同文本片段设置独立样式，可选以下两种方案实现：

方案1：拆分双伪元素实现（无需修改HTML结构） #

分别用::before承载「MY NAME IS」文本、::after承载「jane citizen」文本，单独设置不同样式即可：

/* 自定义第一行文本的字体和字号 */
.header .Heading2.flex-row.first.ab::before {
  content: 'MY NAME IS';
  font-family: "替换为你需要的字体族";
  font-size: 16px; /* 替换为你需要的字号 */
  display: block;
}

/* 原有伪元素仅保留jane citizen相关样式 */
.header .Heading2.flex-row.first.ab::after {
  font-family: Regular;
  font-size:10px;
  content: 'jane\A citizen';
  white-space: pre-wrap;
}

方案2：修改HTML结构拆分标签（适用于样式差异更复杂的场景） #

如果后续还有更多差异化样式需求，可以直接拆分HTML标签实现，可控性更强：

<div class="header Heading2 flex-row first ab">
  <span class="name-tag">MY NAME IS</span>
  <span class="name-text">jane<br>citizen</span>
</div>

对应CSS代码：

.name-tag {
  font-family: "替换为你需要的字体族";
  font-size: 16px; /* 替换为你需要的字号 */
  display: block;
}
.name-text {
  font-family: Regular;
  font-size: 10px;
}

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