无法用::first-line添加标签，因其仅支持文本样式且不支持content属性；应通过HTML语义化包裹、::before绝对定位或inline-flex布局实现首行标签效果。
直接用 ::first-line 伪元素无法添加“标签”（比如带背景色的小徽章、图标或文字前缀），因为它只作用于首行的**文本内容样式**（如颜色、字体、行高），不能插入新内容，也不能添加伪元素的伪元素（::before/::after 在 ::first-line 上无效）。
想实现“首行带标签效果”，得换思路
真正可行的方式是：在 HTML 中明确标记首行内容，再用 CSS 精准控制。以下是几种实用方案：
-
语义化包裹首行文字：把第一行内容单独放进
<span class="label-line">…</span>或<mark></mark>，然后给它加背景、边框、内边距等，模拟标签外观。 -
用
::before配合定位：给段落设置position: relative，再用.text::before绝对定位在左上角，配合top: 0; left: 0;和合适尺寸，做出贴着首行左侧的标签（如「NEW」「重点」）。需注意行高和字体大小对垂直对齐的影响。 -
结合
display: inline-flex或display: grid：把标签和首行文字放在同一行内联容器中，用 flex 控制间距与对齐，保证换行时标签不孤立、不漂移。
小提醒：别踩这些坑
::first-line 只对块级元素生效；它不继承父级的 font-size 或 color，必须显式设置；它无法触发 transform 动画，也不支持 content 属性——所以加图标、符号、计数器都得靠其他方式实现。
一个轻量示例（纯 CSS 标签 + 首行强调）
HTML：<p class="tagged"><span class="tag">提示</span>这是第一行文字，后面可能还有好多行……</p>
CSS：
.tagged { line-height: 1.6; }<br>
.tag { display: inline-block; padding: 2px 8px; background: #007bff; color: white; font-size: 0.85em; border-radius: 3px; margin-right: 8px; }
基本上就这些。想让首行“看起来像带标签”，核心不是依赖伪元素，而是合理结构 + 精准定位 + 视觉微调。
立即学习“前端免费学习笔记（深入）”；
