<span> overlapping strings in a paragraph

Question

Let's say I have text like:

<p>There are many people in Asia.</p>

I want to match two strings: many people, and people in Asia. I want the output to look like both strings were found independently, perhaps applying a different colored underline to each matched string, like so:

But, in HTML I can't overlap spans because if I tried this:

span.first { border-bottom: 1px solid red; }
span.second { border-bottom: 1px solid blue; }

<p>There are 
    <span class="first">many <span class="second">people</span> in Asia</span>.
</p>

the first </span>would close span.second.

My thought is to position divs underneath the text such that they line up with the matched text in the p above, but I bet aligning those divs with the start and end positions of the matched strings using CSS would be a nightmare.

Any thoughts on how to do this?

Answer 1

You could probably put every word in its own individual span element and then use classes to style them appropriately. Some of the spans would have multiple classes where the underlines overlap. Kind of verbose and ugly markup but I think it would solve your problem.

Answer 2

You could markup the overlap component seprately, e.g.:

<p>There are
  <span class="first">many </span>
  <span class="overlap">people</span>
  <span class="second"> in Asia</span>. 
</p>