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

Question

我有一个 Web 表单，我想在其中的输入框前附加货币符号。货币符号对于有符号的货币可以有 1 个字符，对于没有符号的货币可以有 5-6 个字符。

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

我通过在货币标签上设置 -35 像素的边距实现了这一点。但这不会迎合其他具有更多字符的货币，如“第纳尔”或“澳元”。然而，对于像 $ 这样的较小长度的货币符号来说，这太长了。

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

我怎样才能做到这一点？对于此选项，我想坚持使用 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 元素的属性来提供 before 内容，就像我在代码片段中所做的那样。要更改 :before 内容只需更新 mark 属性。例如使用 Jquery $('div.container').attr('mark', 'custom text')