<span> stringhe sovrapposte in un paragrafo

Question

Diciamo che ho di testo come:

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

voglio abbinare due stringhe: many people e people in Asia. Voglio l'uscita a guardare come entrambe le stringhe sono stati trovati in modo indipendente, forse l'applicazione di una sottolineatura di colore diverso per ciascuna stringa corrispondente, in questo modo:

Ma, in HTML non posso sovrapporre campate, perché se ho provato questo:

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> 

il primo </span> avrebbe chiuso span.second.

Il mio pensiero è quello di posizionare div s sotto il testo in modo tale che siano allineati con il testo corrispondente nella p sopra, ma scommetto allineando i div con le posizioni di inizio e fine delle stringhe corrispondenti utilizzando i CSS sarebbe un incubo .

Dei pensieri su come fare questo?

Answer 1

Si potrebbe forse mettere ogni parola nel suo proprio elemento arco individuale e quindi utilizzare le classi per lo stile in modo appropriato. Alcune delle span avrebbero più classi in cui le sottolineature si sovrappongono. Tipo di markup prolisso e brutto, ma penso che sarebbe risolvere il problema.

Answer 2

Si potrebbe markup la componente di sovrapposizione seprately, ad es .:

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

Answer 3

HTML:

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

CSS:

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

Answer 4

Si potrebbe fare questo:

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

Non è così pulito come le altre due soluzioni, ma sarebbe lo stile in un modo simile al tuo esempio originale.