css - 让下划线延伸到文本之外

Question

在表格中，td 标签包含带下划线的动态文本，因此我使用了以下 -

<td width="50%" align= "left">
  <span style="font-size:8px;font-weight:bold;">
    <em style="text-decoration: underline;">{TERMINAL}</em><br />
    (HOME OPERATING CENTER AND ADDRESS)
  </span>
</td>

但是如何让下划线延伸到文本之外，比如直到文本的长度 (HOME OPERATING CENTER AND ADDRESS)？

注意:

我可以多次使用   使其等于文本长度，但它看起来很难看，因为我的文本 {TERMINAL} 长度不固定，所以使用可以无法匹配第二个文本的长度。

Answer 1

我已经稍微清理了代码并替换了你的

<em> with <p>

Fiddle Here

说明:段落的默认宽度是其容器的 100%。通过使用 border-bottom 样式，您可以更好地控制“下划线”在颜色、粗细等方面的外观...

删除 span 只是一种下意识的 react ，但我想这可能有一个“好的”理由。将其添加回去并从表格单元格中删除样式不会影响下划线解决方案。 ;)