前文本加粗、之后恢复常规字重
" />
本文介绍一种纯 CSS 方案，利用 ::first-line 伪元素精准控制换行前后的字体粗细，无需修改 HTML 结构，适用于动态文本场景。
本文介绍一种纯 css 方案，利用 `::first-line` 伪元素精准控制换行前后的字体粗细，无需修改 html 结构，适用于动态文本场景。
在不改动 HTML 的前提下，要实现 <br> 之前文本加粗、之后恢复 font-weight: normal，关键在于理解浏览器对 <br> 的渲染行为：它会强制换行，使 <br> 后的内容进入第二行。因此，我们可以借助 CSS 的 ::first-line 伪元素——它仅作用于块级元素的第一行文本（含换行符前的所有内容），而后续行默认继承父级样式或可单独设置。
只需移除全局加粗规则，改为仅对首行加粗：
.goto-card-label {
/* 移除 font-weight: bold; —— 避免整段继承加粗 */
}
.goto-card-label::first-line {
font-weight: bold;
}配合原始 HTML：
<div class="html-input goto-card-label">Header <br> Subtitle</div>
此时，“Header”位于第一行，被 ::first-line 匹配并加粗；“Subtitle”因 <br> 换行后处于第二行，不受 ::first-line 影响，自然回退至浏览器默认字重（通常为 normal），达到预期效果。
立即学习“前端免费学习笔记（深入）”；
✅ 优势与适用性：
- 完全 CSS 驱动，零 JS、零 HTML 修改；
- 支持动态文本（如服务端注入或 CMS 输出），无需预知具体文字内容；
- 兼容所有现代浏览器（Chrome、Firefox、Safari、Edge ≥79）。
⚠️ 注意事项：
-
::first-line仅对块级容器生效，确保.goto-card-label为display: block或inline-block（默认div即满足）； - 不可与
content属性混用（::first-line不支持content）； - 若首行存在其他内联元素（如
<span></span>、图标等），其样式也会被::first-line影响，需额外重置； - 在极少数排版复杂场景（如多列布局、
writing-mode变更），::first-line行判定可能变化，建议结合line-height和font-size稳定行高。
总结：::first-line 是解决此类“换行前后样式分离”问题最简洁、标准且可靠的 CSS-only 方案——它不依赖文本内容、不侵入 DOM，真正践行了关注点分离的设计原则。
