Text with multiple underlines

Question

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 dif

Answer 1

p {
  font-family:tahoma;
   font-size:16px;
}

span {

  border-bottom:1px solid blue;
  position:relative;
  display:inline-block;
 
}
span:before {
  content:'';
  position:absolute;
  left:0;
  bottom:-3px;
  border-bottom:1px solid red;
  display:block;
  width:100%;
  
}
span:after {
  content:'';
  position:absolute;
  left:0;
 bottom:-5px;
  border-bottom:1px solid green;
  display:block;
  width:100%;
  
}

non-decorated text decorated text non-decorated decorated text
not decorated

You can try to play with after and before pseudo elements, too. Not sure how many lines you need, but you can also add few more, this way...