Pure CSS Alphabet

HTML

<i class="letter a"></i>
<i class="letter b"></i>
<i class="letter c"></i>
<i class="letter d"></i>
<i class="letter e"></i>
<i class="letter f"></i>
<i class="letter g"></i>
<i class="letter h"></i>
<i class="letter i"></i>
<i class="letter j"></i>
<i class="letter k"></i>
<i class="letter l"></i>
<i class="letter m"></i>
<i class="letter n"></i>
<i class="letter o"></i>
<i class="letter p"></i>
<i class="letter q"></i>
<i class="letter r"></i>
<i class="letter s"></i>
<i class="letter t"></i>
<i class="letter u"></i>
<i class="letter v"></i>
<i class="letter w"></i>
<i class="letter x"></i>
<i class="letter y"></i>
<i class="letter z"></i>

CSS

body {
    background-color: #fffddd;
    padding: 3em;
}

/* Global Letter Styling */

.letter {
    border-color: #556 !important; /* Change colour here */
    border-style: solid;
    border-width: .5em;
    display: inline-block;
    position: relative;
}
.letter:after {
    border-color: inherit;
    border-style: solid;
    border-width: .5em;
    content: '';
    position: absolute;
}

/* Individual Letter Styling */

.a {
    border-bottom: none;
    border-radius: 1em 1em 0 0;
    height: 2.05em;
    margin-top: -.05em;
    width: 1em;
}
.a:after {
    border-bottom: none;
    border-left: none;
    border-right: none;
    left: 0;
    right: 0;
    top: .75em;
}
.b {
    border-radius: 0 1em 1em 0;
    height: .5em;
    width: 1em;
}
.b:after {
    border-radius: 0 1em 1em 0;
    bottom: 100%;
    height: .5em;
    left: -.5em;
    width: .9em;    
}
.c {
    border-right: none;
    border-radius: 1em 0 0 1em;
    height: 1.5em;
    width: 1.5em;
}
.c:after {
    border-bottom: none;
    border-left: none;
    border-top: none;
    height: .5em;
    right: 0;
    top: 0;
    width: .5em;
}
.d {
    border-radius: 0 1em 1em 0;
    height: 1.5em;
    width: 1em;
}
.d:after {
    border: none;
}
.e {
    border-right: none;
    height: 1.5em;
    width: 1.5em;
}
.e:after {
    border-bottom: none;
    left: 0;
    right: .5em;
    top: .5em;
}
.f {
    border-bottom: none;
    border-right: none;
    height: 2em;
    width: 1.5em;
}
.f:after {
    border-bottom: none;
    left: 0;
    right: .5em;
    top: .5em;
}
.g {
    border-right: none;
    border-radius: 1em 0 0 1em;
    height: 1.5em;
    width: 1.5em;
}
.g:after {
    border-bottom: none;
    border-left: none;
    border-top: none;
    bottom: 0;
    height: .5em;
    right: 0;
    width: .5em;
}
.h {
    border-bottom: none;
    border-top: none;
    height: 2.5em;
    width: 1em;
}
.h:after {
    border-bottom: none;
    left: 0;
    right: 0;
    top: 1em;
}
.i {
    border-left: none;
   ...