Hacker News Reader

Several of these are actually quite nice.

Granted, they're definitely not link styles to be used "generally", in body text, etc. -- but for an appropriately image-conscious site, they could work particularly in a site header, for example.

Unfortunately it's hard to comment on them individually since they don't really have "names"... but "Wafture", and "Chatoyant" (against red) are particularly nice and tasteful.

View on HN

Did anyone understand how to implement them? are they JS or CSS or both based?

All CSS. Most of them use the :before and :after content trick to insert extra text on the page. Some of the more unique ones use a data-hover attribute with a copy of the link text so that they can show two copies of the same text at the same time and style them differently. (It isn't really cheating, but it's not something you'd want to do for every link on your website.)

BTW, you can right-click a link and inspect with firebug or chrome dev tools to see what css styles are applied to it and how they change when you hover over the link.

Each example is numbered in the source code. The two you mentioned are "effect-1" and "effect-12".

Reply on news.ycombinator.com