如何在右对齐<input>元素中增加光标与文本的间距？

问题场景 #

我有一个右对齐的<input>元素，使用自定义字体（比如示例里的SuperSecret）时，当输入类似5,1或5.1这类值，文本和光标/插入符（cursor/caret）贴得特别近，视觉上很别扭。示例代码如下：

<input type="text" style="text-align: right; font-family: 'SuperSecret';" value="5.1" />

我的核心诉求是绝对不能修改输入数据，所以像用JS在文本末尾加空白字符这类取巧的方法完全不想用。

最终结论（更新） #

经过讨论后确认：仅靠CSS是无法实现这个需求的。

原因说明 #

浏览器的光标位置是根据字体自带的字形度量数据（比如字符的侧边间距、整体宽度）来计算的，目前CSS没有提供任何属性可以直接调整光标与最后一个字符的间距。如果不能碰输入内容，纯CSS层面确实没有可行方案。

如果一定要解决这个问题，唯一的思路可能是修改字体本身——调整目标字符的侧边间距（sidebearing），但这需要有字体编辑能力，而且只适用于你能控制字体文件的场景，显然不是通用方案。

内容的提问来源于stack exchange，提问作者Joel Peltonen