将文本放在跨度下方

Question

我想解析文本区域中的输入文本并更新输入文本，以便某些特殊单词将用红色或绿色下划线，并且错误/绿色单词将显示在下划线下方。

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

请在文本区域输入“Lorum Ipsun Lorum Ipsum aaa Lorum Ipsun bbb Lorum Ipsun”，这样在点击按钮 aaa 和 bbb 后，单词会被 span 替换，但无法将文本置于下划线下方。

提前致谢。

Answer 1

您可以使用伪元素来执行此操作。虽然这在<textarea> 中不起作用。您可以尝试使用<div> 和contenteditable attribute。

.error,
.success {
  text-decoration: underline;
  position: relative;
}

.error::after,
.success::after {
  position: absolute;
  top: 100%;
  left: 50%;  
  transform: translateX( -50% );
}

.error {
  color: red;
}

.error::after {
  content: 'error';
}

.success {
  color: green;
}

.success::after {
  content: 'success';
}

<p>
  Lorem ipsum <span class="error">aaa</span> dolor.
  Lorem ipsum <span class="success">bbb</span> dolor.
<p>