Shortened Link text for mobile prototype

http://stackoverflow.com/questions/19644662/css-hack-to-modify-html-link-text

by TastyBytes

HTML

<div id = "foo">
    <a href="/" rel="bookmark" data-short-text="Shortened Text">Long Text for Regular site</a>
</div>

CSS

#foo a{
    text-indent: -9999px;
    visibility: hidden;
    word-spacing:-999px;
    letter-spacing: -999px; 
}
#foo a:after{
    content: attr(data-short-text);
    visibility: visible;
    word-spacing:normal;
    letter-spacing: normal; 
}