如何在 HTML 中生成位于第二个文本下方的文本？

Question

我想在 html 中得到完全一样的效果：

1 和 2 就在单词的下方，即使句子的位置发生了如下变化：

我怎样才能做到这一点？

注意：我还想将这个带有数字及其位置的句子保存到另一个主题的数据库中:)

Answer 1

定位和伪元素可能是最干净的解决方案。更“动态”的变体可能如下所示：

p {
  font-family: sans-serif;
  line-height: 2.5;
}

span {
  line-height: 1;
  position: relative;
  text-decoration: underline;
}

span::after {
  content: attr(data-number);
  left: 50%;
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
}

<p>
  This <span data-number="1">sentence</span> has an underlined <span data-number="2">text</span>.
</p>

<p>
  This <span data-number="1">sentence</span> has<br>
  an underlined <span data-number="2">text</span>.
</p>