伪元素::before不能自动选中首字，必须手动或用JS将首字包裹在独立标签中再样式化；正确做法是直接对包裹首字的span设置float、font-size、line-height等CSS实现首字下沉。

伪元素::before能给首字加样式，但不能直接选中“第一个字”

浏览器不提供::first-character这种选择器，::before本身也不识别文本内容——它只能挂载在某个已有元素上，然后插入内容。所以想让“文章开头那个字”变大变色，必须先确保那个字被一个独立的标签包裹，比如<span class="dropcap">文</span>，再对这个span用::before就毫无意义；真正该用的，是直接对这个span本身设置样式。

常见错误现象：p::before { content: "文"; font-size: 3em; }——这会把“文”插在段落最前面，覆盖原文首字，导致重复显示。

• 正确做法是手动或用 JS 提取首字，包一层<span class="first-letter"></span>
• 如果用服务端渲染（如 Jekyll、Hugo），可在模板里做字符串切分
• 纯前端 JS 方案要注意：需等 DOM 就绪，且避开<script></script>、<pre class="brush:php;toolbar:false;">&lt;/code&gt;等非文本容器&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;&lt;code&gt;content&lt;/code&gt;属性在&lt;code&gt;::before&lt;/code&gt;里只接受字符串、计数器或&lt;code&gt;attr()&lt;/code&gt;，不能引用文本节点&lt;/H3&gt; &lt;p&gt;有人试过&lt;code&gt;p::before { content: attr(data-first-char); }&lt;/code&gt;，指望从&lt;code&gt;&lt;p data-first-char=&quot;文&quot;&gt;文字内容...&lt;/p&gt;&lt;/code&gt;里读取，这确实可行，但前提是你要自己提前把首字塞进&lt;code&gt;data-&lt;/code&gt;属性——&lt;code&gt;::before&lt;/code&gt;不会自动帮你提取。&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt;content: &quot;W&quot;&lt;/code&gt; → 静态字符，适合固定标题&lt;/li&gt; &lt;li&gt;&lt;code&gt;content: attr(data-dropcap)&lt;/code&gt; → 需 HTML 中显式写&lt;code&gt;&lt;p data-dropcap=&quot;W&quot;&gt;&lt;/code&gt;&lt;/li&gt; &lt;li&gt;&lt;code&gt;content: open-quote&lt;/code&gt;或&lt;code&gt;counter()&lt;/code&gt; → 和首字排版无关，别混用&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;首字下沉常用 CSS 组合：&lt;code&gt;float&lt;/code&gt; + &lt;code&gt;line-height&lt;/code&gt; + &lt;code&gt;margin&lt;/code&gt;&lt;/H3&gt; &lt;p&gt;光靠&lt;code&gt;::before&lt;/code&gt;插内容远远不够，视觉上要“下沉”，得靠浮动和行高配合。现代方案倾向用&lt;code&gt;float: left&lt;/code&gt;，而不是&lt;code&gt;display: inline-block&lt;/code&gt;——后者容易破坏基线对齐，尤其在不同字体下表现不稳定。&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill11112&quot; title=&quot;CSS工具箱(专业版)&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg&quot; alt=&quot;CSS工具箱(专业版)&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill11112&quot; title=&quot;CSS工具箱(专业版)&quot;&gt;CSS工具箱(专业版)&lt;/a&gt; &lt;p&gt;全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill11112&quot; title=&quot;CSS工具箱(专业版)&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;span.first-letter { float: left; font-size: 3.5em; line-height: 0.8; margin-right: 0.2em; margin-top: 0.15em; }</pre> <ul> <li> <code>line-height: 0.8压缩首字自身行高，避免撑开第一行
• margin-top微调垂直位置，弥补不同字体的上升部（ascent）差异
• 务必设font-weight: bold或指定字体，否则小字号衬线体可能看不清
• 不要用vertical-align，它对float元素无效

响应式下em单位比px更可靠，但需重设断点处的line-height

用em写font-size和margin能随父级缩放，但line-height是相对当前字体大小计算的，小屏下line-height: 0.8可能导致首字和第二行文字粘连。

• 在@media (max-width: 768px)里把line-height提到1.0或1.1
• font-size可降到2.8em，但别用rem——它基于根字体，会脱离段落上下文
• iOS Safari 对float + inline混合布局偶有重绘异常，加transform: translateZ(0)可缓解

真正麻烦的是中文字体：没有统一的 x-height 或 ascent 值，同一套 CSS 在“思源宋体”和“霞鹜文楷”里下沉位置可能差两像素——得为关键字体单独微调margin-top。