:lang()伪类需HTML元素真实存在lang属性才生效，仅靠class无效；国旗emoji应选标准单字符、设inline-block与vertical-align微调；content不支持CSS变量，须按语言写死规则。
伪元素里用:lang()匹配语言但不生效
直接写:lang(zh)或:lang(en)没反应，是因为HTML根节点没声明lang属性，浏览器根本不知道当前文本是哪种语言。必须确保<html lang="zh-CN">或<p lang="ja">这类标记真实存在，:lang()才会有依据。
常见错误是只在body里加class比如class="lang-jp"，但:lang()完全不认class，只看lang这个原生属性。
- 检查DOM里目标元素是否带
lang属性，不是class、data-lang或自定义属性 - 值要符合BCP 47标准，比如
zh-Hans（简体中文）比zh-CN更通用，en-US和en-GB都能被:lang(en)匹配 -
:lang()支持链式，:lang(zh):lang(Hans)能精准筛出简体中文，但多数场景用:lang(zh)就够了
::before里用content插入国旗emoji但错位或变方块
直接写content: "??";看似简单，但emoji渲染高度、基线、字体支持差异大，容易和文字不对齐，或者在旧系统/某些字体下显示为豆腐块（□）。
关键不是“能不能放”，而是“怎么放得稳”。优先用系统级支持好的emoji，避免冷门组合；同时强制统一垂直对齐方式。
立即学习“前端免费学习笔记（深入）”；
- 用单个标准化emoji：✅
??、??、??、??，别用??这种可能被拆成两个区域符号的（U+1F1FA U+1F1F8） - 加
vertical-align: -0.125em;微调基线，配合font-size: 0.85em;控制大小，避免撑高行高 - 务必设
display: inline-block;，否则vertical-align无效 - 不要依赖本地字体——加
font-family: system-ui, "Segoe UI Emoji", "Noto Color Emoji";提升兼容性
用CSS变量动态切换国旗但content不支持变量
content属性不支持var(--flag)，这是硬限制。想根据语言自动换国旗，不能靠CSS变量注入内容，得换思路：用:lang()分组写死每种语言的content值。
有人试过用attr(data-flag)，但那需要HTML里每个元素手动加data-flag="??"，违背“自动”初衷；也有人想JS注入style，太重，且破坏纯CSS方案的简洁性。
- 正确做法：为每种目标语言单独写一条规则，比如
[lang="zh"]::before、[lang="ja"]::before - 如果语言种类多，用预处理器（如Sass）生成规则，避免手写重复
- 注意 specificity：
[lang="zh"]比:lang(zh)优先级略高，但语义上后者更干净；两者效果一致，选一个坚持用就行
多语言混合段落里国旗前缀乱套
一段文字里夹着中英文，比如<span>价格：<span lang="en">USD</span> </span>，如果给整个span加::before，国旗只会出现在开头，不会跟着lang="en"那段走。
伪元素绑定的是**宿主元素**，不是里面某个子节点的语言。要让国旗紧贴对应语言片段，必须让lang属性落在最细粒度的可样式化元素上。
- 把
lang移到内联标签上，比如<span lang="en">USD</span>，再写[lang="en"]::before - 避免跨语言包裹：别用
<p lang="zh">中文<span lang="en">English</span>继续中文</p>然后只给p加前缀——那样国旗只出一次，位置也不对 - 若无法改HTML结构，只能用JS遍历文本节点、识别语言边界再包裹，但这就超出纯CSS范畴了
真正麻烦的从来不是插个emoji，而是语言属性是否真实存在、是否落到正确节点、以及emoji在不同环境下的渲染一致性。这三个点卡住，再漂亮的CSS也没法动。
