我的小提琴。
我有一个属性为contenteditable的span，我可以在其中插入一个值。它使placeholder与CSS的:empty、:before和content:attr(placeholder)协同工作。
现在的问题是，当我试图用:after将度量m³放在值的末尾时。它按照我想要的方式工作，在行的顶部，并随着值的长度移动，但当你插入值时，它会干扰插入符号(闪烁的文本插入位置光标垂直条)。
当我说"它出现故障"时，我的意思是它可以是不可见的，不能闪烁，也不能重复视觉插入符号。
移动插入符号可以"修复"问题，但如果将其移动到末尾，它会再次"断裂"。
当我只按12345时(插入符号在末尾，但视觉上不闪烁的插入符号停留在第1个和第2个字符之间)，当我按12345并向左箭头一次时，它显示该插入符号和实际插入符号在最后一个字符之前闪烁。
我知道真正的插入符号没有显示的问题可能是因为:after在上面，但我不知道为什么会出现视觉错误/重复。如何添加边距/填充，使:after向右1像素？
通过键入值来理解问题，对其进行测试。
使用HTML和/或CSS修复首选项，如果不可能，则使用Javascript。
html{
background-color: #202020;
color: #fff;
font-family: consolas;
user-select: none;
}
span{
display: inline-block;
}
.input{
border-bottom: 1px solid #fbbc05;
color: #ea4335;
cursor: text;
margin-bottom: -5px;
outline-style: none;
overflow: hidden;
white-space: nowrap;
}
.input br{
display: none;
}
.input:empty:before{
color: #8a190f;
content: attr(placeholder);
}
.input:after{
content:attr(testattr);
}<body spellcheck="false">
<span>Number:</span>
<span class="input" contenteditable id="test" placeholder="865081" testattr=" m³"></span>
</body>由于并非所有浏览器都会发生这种情况，因此Chrome中的contentEditable属性似乎存在问题。
我很想使用标准的文本输入，并相应地设置样式，看看这是否能解决问题。