CSS - 使用居中文本对齐输入文本进行图像移动

Question

我有一个带有以下HTML的文本输入:

<span>
    &#9997;
</span>
<input type="text">

和相应的CSS:

input{
    text-align: center;
    border: none;
    outline: none;
    background-color: transparent;
}

input元素应该无缝地融入其背景中,只有HTML图标表明它确实是一个输入.当新文本添加到输入中时,HTML图标将保持静态位置并带有当前标记.

反正有没有让我的HTML图标从第一个字母的左边开始,并且当文本字符串的左边界朝同一个方向推动时,它会逐渐向左移动？

小提琴示例

Answer 1

如果你对contenteditable满意,你可以试试这个:

span{
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
span::before {
  content: '\270D';
}

 <span contenteditable='true'></span>