Edit in JSFiddle

<div class="icons">
    <p>
        <span>5</span>
        <span>6</span>
        <span>p</span>
    </p>
</div>

<div class="no-icons">
    <p>
        <span>5</span>
        <span>6</span>
        <span>p</span>
    </p>
</div>

@mixin prefixify($style, $params) {
    -webkit-#{$style}: $params;
    -moz-#{$style}: $params;
    -ms-#{$style}: $params;
    -o-#{$style}: $params;
    #{$style}: $params;
}

@font-face {
    font-family: 'icon-zero-width';
    src: url('http://joelgillman.com/assets/fonts/icon-zero-width.eot?#iefix') format('embedded-opentype'),
         url('http://joelgillman.com/assets/fonts/icon-zero-width.woff') format('woff'),
         url('http://joelgillman.com/assets/fonts/icon-zero-width.ttf')  format('truetype'),
         url('http://joelgillman.com/assets/fonts/icon-zero-width.svg#svgFontName') format('svg');
}

body {
    padding: 1em;
    background: hsl(0, 0%, 4%);
    font-size: 48px;
    text-align: center;
    letter-spacing: -1em;
}

span {
    &:nth-child(1) { color: Tomato; }
    &:nth-child(2) { color: OliveDrab; }
    &:nth-child(3) { color: SteelBlue; }
}

.icons p { font-family: icon-zero-width; }

.no-icons p { font-family: monospace; }

div {
    span {
        @include prefixify(transition, (all 0.8s ease));
    }
}

div:hover {
    span {
        &:nth-child(1) { color: red; }
        &:nth-child(2) { color: green; }
        &:nth-child(3) { color: blue; }
    }
}