前加粗、之后恢复正常字重
" />
在不修改 HTML 结构的前提下，利用 ::first-line 伪元素可精准控制换行前的文本样式，使 之前的内容加粗、之后恢复常规字重。
在不修改 html 结构的前提下，利用 `::first-line` 伪元素可精准控制换行前的文本样式，使 `
` 之前的内容加粗、之后恢复常规字重。
当 HTML 固定为类似 <div class="html-input goto-card-label">Header <br> Subtitle</div> 的形式，且无法添加标签、属性或使用 JavaScript 时，纯 CSS 解决方案的关键在于理解浏览器对 <br> 的渲染行为：它会强制产生换行，从而将内容自然分割为“第一行”和“后续行”。
此时，::first-line 伪元素恰好适用——它匹配块级容器中第一行文本的样式（注意：不是第一个子元素，而是视觉上的首行），而 <br> 之后的内容因换行进入第二行，因此不会被 ::first-line 影响。
✅ 正确写法如下：
.goto-card-label {
/* 移除全局 font-weight: bold */
}
.goto-card-label::first-line {
font-weight: bold;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
-
::first-line仅对块级容器生效（<div> 默认符合）；<li>它作用于<strong>视觉首行文本</strong>，与 <code><br>位置一致，无需关心具体字符内容，完全满足“文本不固定”的需求； - 不要与
::first-letter混淆；也不依赖content属性，因此兼容所有动态文本； - 浏览器支持良好（Chrome 1+, Firefox 1+, Safari 1.3+, Edge 12+）；
- 若
.goto-card-label设置了display: inline或inline-block，需确保其具备块格式化上下文（如添加display: block），否则::first-line可能不触发。
? 补充说明：虽然 <br> 本身是空元素，但 ::first-line 的匹配逻辑基于行盒（line box）生成结果，而非 DOM 结构，因此该方案稳健可靠。若未来需扩展（如首行设色、字号等），同样可通过 ::first-line 统一控制，保持结构与样式的彻底解耦。
