Untitled

<html>
<head>

<style>
p { width:150px; line-height:2em; }

span.annotation { border-bottom:1px solid; }

span.annotation span.annotation { padding-bottom:2px; }

span.annotation span.annotation span.annotation { padding-bottom:4px; }

span.annotation span.annotation span.annotation span.annotation { padding-bottom:6px; }

span[data-uid="001"] { border-color:orange; }
span[data-uid="002"] { border-color:blue; }
span[data-uid="003"] { border-color:red; }
span[data-uid="004"] { border-color:green; }
</style>

</head>
<body>

<p>
Lorem
<span class="annotation" data-uid="004">ipsum dolor
	<span class="annotation" data-uid="001">sit amet,
		<span class="annotation" data-uid="002">consectetuer adipiscing
		</span>
		elit.
	</span> Aenean commodo ligula eget dolor. Aenean massa.
	<span class="annotation" data-uid="002">Cum sociis
		<span class="annotation" data-uid="001">natoque penatibus et
			<span class="annotation" data-uid="003">magnis
			</span>
			dis parturient montes, nascetur
			</span> ridiculus mus.
		</span> Donec quam felis, ultricies nec,
	<span class="annotation" data-uid="002">pellentesque eu,
	</span>

	<span class="annotation" data-uid="001">
		<span class="annotation" data-uid="002">pretium
		</span>
		 quis, sem
	</span>
	Donec pede justo, fringilla vel, aliquet nec,
	</span> vulputate eget, arcu.
</p>

</body>
</html>