Decorate <time> elements with a little clock icon that changes according to the time being displayed
GitHub project here:
And a sample of what I am talking about:
The Analog Clock icon set allows
<time></code> elements to have a visual notation in a simple, progressive way using a
@font-face</code> to deliver a custom font for the clock face. The icon is therefore scalable and can be styled with CSS to match most site designs.
<time></code> elements and add the HTML necessary for the icon set. Both options are documented in the sample and can be modified to fit specific situations.
The CSS uses
:before</code> pseudo elements to place the icons, therefore, there is no extraneous HTML content present when the
:before</code> element is not supported. Graceful fallback to the contents of the
<div class="timestamp"> <time datetime="2013-02-20 4:09:00"> <span class="hour-4"><span class="minute-09"></span></span> 4:09pm </time> </div>