css3 acronym <abbr> tag

acronym first-letter <abbr> tag

by polinux

HTML

<ul class='acronym'>
    <li> <abbr>
            <span>Random</span><span>Access</span><span>Memory</span>
        </abbr>

    </li>
    <li> <abbr><span>What</span><span>You</span><span>See</span><span>Is</span><span>What</span><span>You</span><span>Get</span></abbr>

    </li>
    <li><abbr><span>United</span><span>Nations</span><span>International</span><span>Children's</span><span>Emergency</span><span>Fund</span></abbr>

    </li>
</ul>
<p>
    Le siège de l'<abbr><span>United</span><span>Nations</span><span>Educational,</span><span>Scientific and</span><span>Cultural</span><span>Organization</span></abbr> est situé à Paris (France), au 7/9 place de Fontenoy, dans le 7e arrondissement....
</p>

CSS

.acronym {
    list-style: none;
    padding: 0;
    font-family: Helvetica, Arial, sans-serif;
}
.acronym li {
    border: 1px solid #999;
    padding: 6px;
    margin: 2px;
    background: #F8F8F8;
    box-shadow: inset 0px 2px 3px #CCC, 0px 1px 0 #fff;
    border-radius: 2px;
    color: #333;
}
abbr span {
    font-size: 0;
    display: inline-block;
    transition: font-size .5s ease;
    padding-right: 0.2em;
}
abbr span:after {
    content: '.';
    font-size: 16px;
}
abbr:hover span:after {
    content: '';
}
abbr span:first-letter {
    font-size: 16px;
    text-shadow: -2px 1px 0 rgba(166, 166, 166, 1);
    font-weight: bold;
    margin-left: .2em;
}
abbr:hover span {
    font-size: 1em;
    transition: font-size 1s ease;
}