CSS：基于元素宽度的动态边距

Question

我有一个网页表单，我想在输入框之前添加货币符号。 货币符号对于带符号的货币可以有1个字符，对于没有符号的货币可以有5-6个字符。

我正在寻找这样的东西。注意货币符号的移动。

我通过在货币标签上设置-35px的保证金来实现这一目标。 但这不会迎合其他货币的数量更多，如'Dinar'或'AUS $'。然而，对于像$这样的较小长度的货币符号来说太过分了。

我想将边距设置为元素占据的宽度的负值。

我怎样才能实现这一目标？ 我想坚持使用CSS这个选项，而不是js。

我是否应该改变我的风格或者是否需要更改表格的布局？

有利的解决方案是使用CSS而不是更改任何布局或围绕此编写任何js代码。

Answer 1

::before伪元素怎么样？

.container::before {
  content: attr(mark); // get text to insert before .container from mark attribute
}

<div class="container" mark="xoxo">
  <input value="00">
</div>

伪元素不能从文档范围控制，但您可以使用DOM元素的attribut来提供before内容，就像我在片段中所做的那样。 要更改:before内容，只需更新mark attribut即可。 例如，使用Jquery $('div.container').attr('mark', 'custom text')