Nested underlined text elements - css

Question

I have in text paragraphs some rather large portions of underlined texts. Many of them go over several lines.
Within those underlined elements, in some cases I have elements that should be underlined themselfes. Here, the underline of the outer underlined element should go a little down in order to make the underline of the inner underlined elments visible. Look at the third line of my mockup and you will understand what I mean (at least I hope so). "querit" and "Epicurae" are underlined within underlined elements.
How can I achieve this in CSS? With text-decoration: underline the underlines collapse and you won't see which elements are nested underlined elements. On the other hand, display:inline-block; border-bottom:1px solid black; will just underline the last line.
Edit: The HTML for this mockup would look like this: (not particulary interesting, I guess)
<p> de con firt omniandabetisporatienimusi remprobist extrum etis e ipsaenderienimagnos <span class="underlined">quibus quidas mus, ines, quam Solostracum met ipsa horum mum, esispotatus con ipid inprobus, que vollin que <span class="underlined">querit</span> pus nego mo <span class="underlined">Epicurae</span> id sitam mod etia et nectuas ent malosse te. quitus, essendolinxet ob utrus aleganesserisimone ne nitae lium vitae; Metisquiamquae sid los plego ilius, andus adexperibus vitur. quod dictantum alt, num Toriae</span> conc ocorturaec </p>

Answer 1

Just don't use display: inline-block. Say, we are using the tag <span class="und"> for underlining something. For a nested one, use something like this:
/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body {margin: 15px;}
/* End Praveen's Reset for Fiddle ;) */
p {margin: 0 0 10px;}
.und {border-bottom: 1px solid; padding: 2px;}
.und .und {border-bottom: 1px solid; padding: 0;}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, cumque! Facere iste, adipisci non quam molestias modi! Reprehenderit, quo officia est voluptatibus eum omnis magni voluptate. Similique, voluptatibus quasi dolore!</p>
<p><span class="und">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque quo ea natus deserunt praesentium laudantium similique, officia sequi unde provident quasi aliquid iure, tempora sunt quod doloremque, dolor. Voluptate, tempora! <span class="und">This is double underlined and doesn't break!</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor commodi adipisci similique eligendi a praesentium officia repudiandae quaerat ipsum placeat natus nemo, sit magnam laborum error vero, ullam officiis veniam!</span></p>
Nested Items
/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body {margin: 15px;}
/* End Praveen's Reset for Fiddle ;) */
p {margin: 0 0 10px; line-height: 1.5;}
.und {border-bottom: 1px solid; padding: 4px;}
.und .und {border-bottom: 1px solid; padding: 2px;}
.und .und .und {border-bottom: 1px solid; padding: 0;}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, cumque! Facere iste, adipisci non quam molestias modi! Reprehenderit, quo officia est voluptatibus eum omnis magni voluptate. Similique, voluptatibus quasi dolore!</p>
<p><span class="und">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque quo ea natus deserunt praesentium laudantium similique, officia sequi unde provident quasi aliquid iure, tempora sunt quod doloremque, dolor. Voluptate, tempora! <span class="und">This is double underlined and <span class="und">triple consectetur adipisicing</span> doesn't break!</span> Lorem ipsum dolor sit amet, elit. Dolor commodi adipisci similique eligendi a praesentium officia repudiandae quaerat ipsum placeat natus nemo, sit magnam laborum error vero, ullam officiis veniam!</span></p>