button元素上::first-letter伪元素无效，因其为替换元素且规范限定该伪元素仅作用于块级容器内纯文本节点首字符；可靠方案是改用div[role="button"]配合内部p或span元素应用::first-letter，或用js提取首字包裹span实现精准控制。
button 元素里用 ::first-letter 无效，别白试了
直接给 <button>这是一段文字</button> 写 button::first-letter { font-size: 2em; } —— 绝大多数浏览器（Chrome、Firefox、Safari）根本不会生效。不是你写错了，是规范限制：::first-letter 只作用于**块级容器内的纯文本节点首字符**，而 <button></button> 是替换元素（replaced element），其内部文本渲染机制不触发该伪元素。
想让按钮文字首字放大，得先“骗过”浏览器
核心思路：把按钮内容转成标准块级结构，再对其中的 <p></p> 或 <span></span> 应用 ::first-letter。实操分两步：
- 用
<div role="button"> 替代原生 <code><button></button>，确保语义可用（别忘了加tabindex="0"和aria-label） - 在内部包裹一层
<p class="btn-text">确定</p>，然后写.btn-text::first-letter { font-size: 1.8em; float: left; line-height: 0.75; margin-right: 0.15em; } - 必须显式设
line-height，否则第二行文字会顶上来；float: left是实现“下沉放大”的关键，光大不浮没用
更稳的方案：JS 提取首字并手动包裹
面对中文、标点、富文本输出等不确定场景，CSS 伪元素靠不住。直接用 JS 拆解字符串，插入 <span class="first-char"></span> 包裹首字符：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
const btn = document.querySelector('.custom-btn');
const text = btn.textContent.trim();
if (text) {
const first = text[0];
const rest = text.slice(1);
btn.innerHTML = `<span class="first-char">${first}</span>${rest}`;
}
对应 CSS 就简单多了：.first-char { font-size: 1.8em; font-weight: bold; vertical-align: top; }。好处是：完全可控、中文无歧义、兼容所有浏览器、支持动态更新内容。
别踩这些坑
常见翻车点就几个：
- 在
<button></button>上直接套::first-letter，还反复调font-size和color—— 浪费时间 - 用
transform: scale()放大首字：视觉上像，但点击热区、文字选中、屏幕阅读器都出问题 - 忽略
vertical-align：首字默认 baseline 对齐，容易和后续文字错位，加vertical-align: top或middle更稳 - 没处理空格或换行：服务端返回的按钮文案带前导空格？JS 方案里记得
.trim()，CSS 方案里得预处理 HTML
真正要落地的项目，尤其是中文界面，别赌浏览器对 ::first-letter 的实现一致性——手动包裹 + 简单 CSS，才是省心又靠谱的做法。
