CODEWITHSUNDEEP
javascriptfontsunderlinecufon
Haris
Haris

Reputation: 1059

Cufon: Underline Text

How can I underline a text replaced with Cufon?

Upvotes: 11

Views: 13476

Answers (3)

Chris McFarland
Chris McFarland

Reputation: 6169

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?

Upvotes: 20

Rick
Rick

Reputation: 485

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.

Upvotes: 1

Alex
Alex

Reputation: 131

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...

Upvotes: 13

Related Questions