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:

As evidence that the overline property is not being completely ignored the CSS3 Working Draft provides for extra overline styles that will allow for different visual appearances and colors for overlines applied to text. My initial testing showed that none of these are supported yet by mass-market browsers, but keep in mind that they may be supported at some point in the future. They have a “thick” property but I wish they also had a “thin” one because in the example I am showcasing here the overline could stand to be a little thinner.

Has anyone else seen any other legitimate uses of overline?