When I started learning about CSS in 1999 one of the CSS values I learned about was that of overline for the text-decoration property. It didn’t seem to have much to use it for but I did stumble across one website where overline and underline effects were added to links when hovered over.

A short time later I started a site at http://radio.lionking.org and since the title treatment for this animated film has an overline effect in it I decided to add one with CSS to the title of my site. The H1 for the title is as follows:

<h1>R<span>ADIO</span> L<span>ION KIN</span>G</h1>

Using my old school CSS techniques from “The Year 2000” I set the base font-size for the H1 to 70 pixels (I might change it to an em-based sizing sometime) then set anything wrapped within a SPAN in the H1 to 75% of that. Then the second SPAN (the one that needs the overline effect) has text-decoration: overline; applied to it. The result, which turned out quite well, can be seen below or at the site: Read the rest of this entry »