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

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

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

和相应的CSS：

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

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

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

Fiddle Example

解决方法

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

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

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