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

【问题标题】：CSS: Dynamic margin based on element widthCSS：基于元素宽度的动态边距
【发布时间】：2019-08-30 23:54:46
【问题描述】：

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

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

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

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

我怎样才能做到这一点？对于这个选项，我想坚持使用 CSS 而不是 js。

我应该改变我的风格还是需要对表单的布局进行任何更改？

最好的解决方案是使用 CSS，而不是更改任何布局或编写任何 js 代码。

【问题讨论】：

你能加一个sn-p / fiddle吗？
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example
我很抱歉。让我在小提琴上弄点东西。
jsfiddle.net/gsg16/ckk8nt0b/2 此链接包含示例。它缺少 bootstrap.min.css。我无法将它添加到小提琴中。添加后，示例将看起来像屏幕截图。

标签： css margin

【解决方案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 内容，就像我在 sn-p 中所做的那样。要更改 :before 内容，只需更新 mark 属性。例如使用 Jquery $('div.container').attr('mark', 'custom text')

【讨论】：