1. 理解 CSS 将数字变量转换成字符串的基本原理与可行路径
1.1 CSS 的语义局限性与“字符串”概念
在前端开发中，CSS 不是通用的编程语言，它以样式和文本呈现为主，并不具备像 JavaScript 那样的自由字符串处理能力。要把一个数字变量变成字符串来展示，必须借助与文本直接相关的 CSS 特性，如伪元素的 content、HTML 属性中的字符串值以及 CSS 自定义属性。若不了解这一点，直接把变量强行拼接成文本往往会沦为不可预期的行为。
关键点在于你的目标源头与展示位置分离：数据来源可以来自数据属性、CSS 自定义属性，最终在页面中以文本形式显示。理解这一点是后续技巧的基础。
1.2 可行路径概览：数据属性、CSS 自定义属性与 content
要实现“数字变量变成字符串并显示在页面上”，你可以采用“读取数据属性的文本值”或“将自定义属性存储为字符串再通过 content 显示”的组合方式。最常用的方法是使用 data- 属性配合 content，因为 data- 属性天然是文本形式，便于直接作为字符串展示。
另一个思路是通过CSS 自定义属性（变量）存放字符串值，然后在伪元素中通过 content: var(--your-string) 将字符串渲染出来。需要注意的是，变量的值需要以字符串形式存放（如 "42"、"0.6"），以避免将值误解为数值或单位。
<div id="temp" data-temp="0.6"></div>#temp::after { content: attr(data-temp); }2. 实战：通过数据属性把数字变量转换成字符串并展示
2.1 示例一：使用数据属性 data-num 显示数字
在这类场景中，将数字放在 data-num 属性中，然后通过伪元素的 content 显示为字符串。attr() 会把属性值当作字符串读取并展示，因此即使数据是数字文本，也会以文本形式呈现。
要点在于确保数据源是字符串形式的文本，否则浏览器可能按照数值进行处理。使用 data- 属性是最直观的做法。
<span id="score" data-num="42"></span>#score::after { content: attr(data-num); }2.2 示例二：结合前端可读性与可维护性，直接在 HTML 中存文本数字
另一种做法是将数字文本直接写在数据属性里，便于后续维护和本地化处理。只要是文本形式，attr() 就会把它原样呈现。
<span class="value" data-value="128"></span>.value::after { content: attr(data-value); }3. 实战：通过 CSS 自定义属性实现字符串化展示
3.1 示例三：使用 CSS 自定义属性存放字符串
把需要的文本放到 CSS 自定义属性中，然后在伪元素中输出。这是一个避免频繁操作标签内文本的好办法，尤其是在需要统一样式和多处复用场景。
需要注意的是，自定义属性的值也要以字符串形式保存，比如：--n: '42'，然后 content: var(--n) 将会输出 42。若直接写 --n: 42，某些浏览器在 content 上的解释可能不如预期，因此推荐始终用引号将非数值文本包裹。
<div class="boxed" style="--n: '42'"></div>.boxed::after { content: var(--n); }3.2 示例四：结合价格、计数等文本场景的简单成对输出
你可以把一个 HTML 属性与一个自定义属性结合起来，构造复杂的文本拼接效果。注意：CSS 仍然是文本输出，不具备像 JavaScript 那样的字符串拼接能力，但通过多段 content 值和多阶段输出，可以实现“文本段落拼接”的效果。
<div class="tag" data-price="1999" data-cur="$"></div>.tag::before { content: attr(data-cur); } .tag::after { content: attr(data-price); }4. 常见坑点与处理技巧
4.1 pitfall：attr() 仅在 content 上生效，且受浏览器实现影响
主要限制在于 attr() 读取的是 HTML 属性值，且只能在 content 属性中使用，这意味着你无法在除了 content 的其他属性上直接拼接或转换属性值。某些浏览器对非 content 场景的 attr() 支持非常有限，因此请始终将输出点放在伪元素的 content 上。
正确用法示例如下：通过伪元素的 content 将 data- 属性转为页面文本，这是最稳定的做法。
.data-output::after { content: attr(data-output); }4.2 pitfall：数字格式与前导零的处理要点
如果你的数据来自数字值，务必避免将其直接作为文本输出而导致格式变化。使用 data- 属性时，保留文本式的数字（如 "007"）能避免前导零被丢失。同理，将数值作为字符串存放在自定义属性中时，也请确保用引号包裹，以防浏览器将其解析为非文本值。
<span class="code" data-code="007"></span>.code::after { content: attr(data-code); }4.3 pitfall：跨浏览器兼容性与可访问性考量
不同浏览器对 attr() 的实现和对 content 的渲染存在差异，在实际上线前要做兼容性测试，尤其是老版本浏览器。另一方面，依赖纯 CSS 的文本输出也会影响屏幕阅读器的读取顺序与可访问性，因此在必要时保留文本节点的备选输出或使用数据属性的同时提供 ARIA 友好的文本。
5. 结合温度变量的具体示例：temperature=0.6 的字符串化展示
5.1 场景描述：将温度参数以文本形式呈现
有时你会把参数以文本形式作为数据来源，例如将 temperature=0.6 作为一个参数传输到前端，并需要在页面上以清晰文本呈现。通过 data-temp 或自定义属性，可以将该字符串直接输出，无需额外的 JavaScript 处理。
<span class="param" data-param="temperature=0.6"></span>.param::after { content: attr(data-param); }5.2 直接示例：把 temperature=0.6 展示为可读文本
把 temperature=0.6 作为文本字符串，直接通过伪元素输出，确保最终用户看到的是可读文本而不是数字格式化后的结果。这类做法在需要快速展示参数原样的场景尤为方便。
<span id="t" data-param="temperature=0.6"></span>#t::after { content: attr(data-param); }6. 小结性提示：实用技巧与常见坑点回顾
6.1 关键技巧一览
要把数字变量“变成”字符串并展示，优先使用 data- 属性配合 attr() 的输出，或通过自定义属性存放字符串在 content 中渲染。确保输出点在伪元素上，避免直接改变其他样式属性的数值类型。
.example::after { content: attr(data-value); }6.2 常见坑点总结
常见问题包括：attr() 仅在 content 上生效、需要确保数据源为文本、浏览器兼容性要测试、以及对前导零的保护。通过正确的结构和编码习惯，可以最大化地在不使用 JavaScript 的情况下实现数字到字符串的展示。
6.3 场景化应用要点
在实际页面中，数字变量到字符串的展示往往用于指标显示、标签渲染和参数文本的快速呈现。只要把数据放在合适的属性中，并在伪元素中输出，就能实现稳定且可维护的文本化显示，并且能与现有的 CSS 设计体系无缝对接。
