<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
    font-family: "WebFont";
    src: url("resources/Ahem-COLR.ttf") format("truetype");
}

body {
    position: relative;
}

#one {
    position: absolute;
    left: 100px;
    top: 40px;
}

#two {
    position: absolute;
    left: 300px;
    top: 40px;
    color: rgb(255, 0, 255);
}

#three {
    position: absolute;
    left: 300px;
    top: 40px;
    color: rgb(0, 255, 255);
}

#four {
    position: absolute;
    left: 500px;
    top: 40px;
}

div {
    font: 200px "WebFont";
    position: absolute;
    left: 400px;
    top: 40px;
}
</style>
</head>
<body>
<div id="one">B</div>
<div id="two">B</div>
<div id="three">&#x7EB5;</div>
<div id="four">B</div>
<div style="position: absolute; left: 98px; top: 38px; width: 604px; height: 4px; background: blue;"></div>
<div style="position: absolute; left: 98px; top: 238px; width: 604px; height: 4px; background: blue;"></div>
<div style="position: absolute; left: 98px; top: 38px; width: 4px; height: 204px; background: blue;"></div>
<div style="position: absolute; left: 298px; top: 38px; width: 4px; height: 204px; background: blue;"></div>
<div style="position: absolute; left: 338px; top: 38px; width: 4px; height: 204px; background: blue;"></div>
<div style="position: absolute; left: 378px; top: 38px; width: 4px; height: 204px; background: blue;"></div>
<div style="position: absolute; left: 498px; top: 38px; width: 4px; height: 204px; background: blue;"></div>
<div style="position: absolute; left: 698px; top: 38px; width: 4px; height: 204px; background: blue;"></div>
</div>
</body>
</html>