JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
<script src="http://fonts.googleapis.com/css?family=Ubuntu+Mono"></script>
<div><span class="wierdo" style="font-size: .75em"></span><span class="baseline"></span></div>

<div><span class="wierdo"></span><span class="baseline"></span></div>

CSS

body {
    font-size: 3em;
    font-family: 'Ubuntu Mono';
}

div {
    background: #BDC3C7;
    margin-bottom: .25em;
}

.wierdo {
    display: inline-block;
    width: 1.5em;
    height: 1em;
    background: #3498DB;
}

.wierdo:before { content: '_…—'; }
.wierdo:hover:before { content: ''; }

.baseline {
  display: inline-block;
  width: 2em;
  height: 1px;
  background: #8E44AD;
}