可以在css中显示剪辑到内容宽度的背景图像吗？

Question

我有两个div，内联。一个显示测量值，另一个显示单位值。每个文本目前都正确对齐。

我想显示一条横跨测量值顶部的条形图，但不再显示。注意：由于各种原因，我不能使用text-decoration：overline。相反，我试图在文本后面显示背景图像，剪切到文本的宽度（而不是div）。

我尝试过使用display：table;在测量div上，这是有效的，但它会影响我的div布局（文本在div之间没有对齐）。

这是一些示例html：

<div class="measurement">1234</div><div class="unit">mm</div>

以下是一些示例css：

.unit {
  display:inline-block;
}
.measurement {
  display:inline-block;
  background-image:url(overline.png)
  width:200px;
  text-align: right;
}

有没有人知道我可以将背景图像剪切到显示文本宽度的方法？

Answer 1

只需使用边框而不是图像：

.measurement {
  display:inline-block;
  border-top:1px solid #000000
}

Answer 2

如何将div更改为跨度并将测量范围包装在div中以将其调整到所需的宽度？

HTML：

<div class="spacer"><span class="measurement">1234</span></div><span>mm</span>

CSS：

.spacer{
  width:200px;
  display: inline-block;
  text-align: right;
}

.measurement {
  background-image:url(overline.png);
}

有关工作示例，请参阅this jsFiddle。 （背景颜色应与图像相同）。