Put text below span

Question

I want to parse the input text from Text Area and update the input text such that some special word will be underline by red or green color and error/green word will be shown just below the underline.

I have update the dynamic text but not able to put Success/error text below the underline.

Please use input in text area as 'Lorum Ipsun Lorum Ipsum aaa Lorum Ipsun bbb Lorum Ipsun ' so after click of button aaa and bbb words are replaced with span,but not able to put text below underline.

Thanks in advance.

Answer 1

You can use pseudo elements to do this. Though this won't work in a <textarea>. You could try using a <div> with the 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>