<div><!-- --><span class="line middle v-line red"></span><!-- --><span class="line baseline v-line blue"></span><!-- --><span class="image"></span> <span class="text">My Name</span> </div> <div style="margin-top:50px;"><!-- --><span class="line middle v-line red"></span><!-- --><span class="line baseline v-line blue"></span><!-- --><span class="image middle"></span> <span class="text">My Name</span> </div> <div style="margin-top:50px;"><!-- --><span class="line middle v-line red"></span><!-- --><span class="line baseline v-line blue"></span><!-- --><span class="image middle"></span> <span class="text middle">My Name</span> </div>
body { font-size: 26px; } .image { display: inline-block; width: 100px; height: 100px; background-color: green; } .middle { vertical-align: middle; } .v-line { position: relative; margin-right: -100%; border-top-width: 1px; border-top-style: dotted; } .line { display: inline-block; width: 100%; } .blue { border-color: blue; } .red { border-color: red; }