Cufon: Underline Text

Question

How can I underline a text replaced with Cufon?

Answer 1

text-decoration is not supported by Cufon:
https://github.com/sorccu/cufon/wiki/known-bugs-and-issues

Perhaps you could add a border-bottom property to the element using normal CSS?

Answer 2

Cufon adds a class to the elements it creates that you can style (useful if your containing element has pads/margins). So for a link, just use this:

a .cufon {border-bottom: solid 1px #000000}
a:hover .cufon {border-bottom: none}

To keep your elements from shifting up/down, either add a border to the non hover state, or adjust the heights of both elements accordingly...

Answer 3

Be aware though. Adding a border bottom to a cufon class is quite ugly.

I'd be best to avoid underlines to these fonts in your design. It might look nice in Photoshop, but don't show this to you customers. It doesn't work out that well in HTML/CSS.