Javascript 将文本置于span下方

我想从文本区域解析输入文本并更新输入文本，这样一些特殊的单词将以红色或绿色加下划线，错误/绿色单词将显示在下划线的正下方

我已更新动态文本，但无法将成功/错误文本置于下划线下方

请使用文本区域中的输入“Lorum Ipsun Lorum Ipsum aaa Lorum Ipsun bbb Lorum Ipsun”，因此在单击按钮后，aaa和bbb单词将替换为span，但无法将文本置于下划线下方

---

提前感谢。

您可以使用伪元素来完成此操作。虽然这在

中不起作用。您可以尝试将

与一起使用

。错误，
.成功{
文字装饰：下划线；
位置：相对位置；
}
.error：：之后，
成功之后{
位置：绝对位置；
最高：100%；
左：50%；
转化：translateX（-50%）；
}
.错误{
颜色：红色；
}
.错误：：之后{
内容：“错误”；
}
.成功{
颜色：绿色；
}
成功之后{
内容:"成功";；
}

Lorem ipsum aaa dolor。
Lorem ipsum bbb dolor。

如果你无法避免使用

textarea，请找到jsfiddle。这看起来非常棘手：@SaurabhMahajan评论可以删除。你应该把你的代码示例放在问题的主体中，并加上一句：谢谢你的及时回复。这几乎解决了我的问题。现在唯一的问题是当文本较大且输出为2-3行时，因此错误和成功将被下一行覆盖。更新小提琴-。你能帮忙吗。线与线之间需要足够的间隙。我不能使用线条高度