css3 acronym <abbr> tag +Javascript

acronym first-letter <abbr> tag www.polinux.fr

by polinux

HTML

<ul class='acronym'>
    <li><abbr>Centre d'Enregistrement et de Révision des Formulaires Administratifs</abbr></li>
    <li><abbr>What You See Is What You Get</abbr></li>
    <li><abbr>United Nations International Children's Emergency Fund</abbr></li>
    <li>
        <abbr>Electrically Erasable Programmable Read-Only Memory</abbr>
    </li>
    <li>
        <abbr>Light Amplification by Stimulated Emission of Radiation</abbr>
    </li>
    
</ul>
<p>Le siège de l'<abbr>United Nations Educational, Scientific and Cultural Organization</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 {
cursor:help;
}

p abbr {
  border-bottom-color: silver;  
  border-bottom-style: dotted;
  border-bottom-width: 2px;  
}
abbr span {
    display:inline-block;
    padding-right: .2em;
}
abbr, abbr span {
    font-size:0;
    transition: font-size .2s ease;
}
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, abbr:hover span {
    font-size:1em;
    transition: font-size .2s ease-out;
}

JavaScript

var abbrs = document.getElementsByTagName("abbr"); 
for( var i = 0, l = abbrs.length ; i < l ; i++ ) {
    abbrs[i].innerHTML = abbrs[i].textContent.replace(/([A-Z][A-z0-9éèàêù'<>/]+)/g, '<span>$1</span>');
}