<span class="line"><!-- --><span class="line middle v-line green"></span><!-- --><span class="line baseline v-line blue"></span><!-- -->x<span class="middle" style="margin-left: 20px;">middle</span> </span>
body { font-size: 20px; } .line { display: inline-block; width: 100%; } .baseline { vertical-align: baseline; } .middle { vertical-align: middle; } .v-line { position: relative; margin-right: -100%; border-top-width: 1px; border-top-style: dotted; } .green { border-color: green; } .blue { border-color: blue; }