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.

If you cannot avoid using `textarea` it looks REALLY tricky: https://stackoverflow.com/a/163395/1977018 — raul.vila, Apr 18 '18 at 18:07
@SaurabhMahajan comments can be deleted. You should put your code example in the body of the question with an [edit] — , Apr 18 '18 at 20:39

score 3 · Accepted Answer · answered Apr 18 '18 at 18:06

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>

:Thanks for the prompt reply.This almost solves my problem. Now only problem came when text is large and output will be of 2-3 line so the error and success will override with next line . Updated fiddle - https://jsfiddle.net/o2gxgz9r/46008/ . Can you please help in that. need enought gap between line. I am not able to use line-height — Saurabh Mahajan, Apr 18 '18 at 18:15

Put text below span

1 Answers1