Text with multiple underlines
<p>My application is that it is some online document to which user can annotate and underline the text for reference. Now this can be done by multiple users, hence need to have different colors for each underline.</p>

<p>So basic requirement is that I need to have a text with multiple underlines below it. Also the underline colors should differ.</p>

<p>Hard way I know is that I can add div/span with line and position it under the text but it can be bit difficult to handle the positions in case of responsive window.</p>

<p>Is there any way to do this using text properties only?
I googled for it and found this link</p>

<p><a href="http://fsymbols.com/generators/lines/" rel="noreferrer">http://fsymbols.com/generators/lines/</a></p>

<p>They are using fsymbols to generate underlines.
But I'm not getting how can I add this to my application. Also it doesn't look like it can have different colors.</p>

<p>Any simpler way or I have to do the hard way only?</p>