Hide child element using text-indent

[mhulse]

Using overflow: hidden and a negative text-indent can visually hide text/inline elements yet still retain their accessibility and, hopefully?, SEO goodness:

.audio {
    line-height: 1;
    text-indent: 100%;
    direction: ltr;
    white-space: nowrap;
    width: 150px;
    height: 50px;
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    cursor: hand;
}
.audio audio {
    display: inline; /* For `text-indent` */
}

<div class="audio">
    <audio preload="none" controls autoplay hidden>
        <source src="foo.mp3" type="audio/mpeg">
    </audio>
</div>

This technique can also be used to show background images (like a logo, see #151) and hide text (useful for screen readers and/or if styles are not loaded you still get text).

Related: #145