Как можно добавить иконку рубля к числу в инпуте?

Question

[lexstile]

Есть обычный инпут - ссылка, необходимо добавить иконку, чтобы она перемещалась вправо в зависимости от заполненности поля.
Нельзя вставлять ее в value инпута.
Как можно решить данную задачу?
Можно ли ее решить через after и attr? (иконка должна быть подвижна)

Пример:

Comments

[Maxim Kirshin]

паддинг просто сделать справа?

[lexstile]

Maxim Kirshin, пока не совсем понимаю - зачем и как прокидывать значение паддинга? Как его считать в зависимости от заполненности инпута?

[Maxim Kirshin]

lexstile, Не нужно ничего прокидывать, это обычный CSS. вот обычный пример, суть поймешь думаю

label {
  box-sizing: content-box;
  position: relative;
}

label:after {
  content: attr(data-icon);
  position: absolute;
  top: 0;
  right: 6px;
}

label input {
  padding: 10px 20px 10px 5px;
}

[lexstile]

Maxim Kirshin, иконка должна скользить вместе с заполненностью поля, то есть:
Ввели "100", в инпуте будет "100 ₽" (иконка находится рядом с числом)

[lexstile]

Maxim Kirshin,

[Владимир Солнцев]

lexstile, без js не выйдет. С js в один обработчик на инпут, слушаете событие инпут, проверяете длину строки в свойстве value, смещаете свой рубль на нужную величину, которую либо константой задаете, либо рассчитываете в зависимости от размера шрифта и стиля начертания.

[Егор Живагин]

Имхо, считать js-ом длину строки и из неё высчитывать отступ -- это костыль какой-то

А почему нельзя прокидывать в value, если не секрет?

Answer 1

[Антон]

Подрихтовать только бы, быстро набросал