「続きを読む」を画像にしてみるの巻

ふと思い立って、久しぶりにはてなのCSSをちょこちょこいぢったら、えらい目に合いました。ただ単にあまり使うことのない「続きを読む」の文字を画像にしたかっただけなのに……
いわゆるはてな記法で「====」を使うと、それにともなうタグやら何やらが自動で挿入され、ブラウザ上では「続きを読む」の文字がリンクとして表示されます。その文字を例えば「more...」とか、「continue...」みたいに変えたくてもはてなの仕様では無理、そして当然、画像にも変えられず……多分。実は普通に簡単に設定出来るぢゃんとオチだったら、びっくりこきまろ。
文字は変えられずとも、CSS を使って p.seemore a に背景を指定して画像にする方法がありますが、その画像はあくまで背景ですから「続きを読む」の文字が背景画に被ってしまいます。そこで文字を text-indent や padding を使って a タグの範囲外に飛ばすことで画像だけにすることが出来るものの、それだと画像OFFの時に a タグ部分に何も表示されず、リンクが見えなくなっちゃうからアクセシビリティ的にどうかと思う所存。
まぁいってしまえば、今時画像OFFにしてブラウぢングする人なんかいないでしょうから、気にしなくてもいい話といえば話。
ですけども一応気になる身、そこで z-index:-1 を使って隠してみてはどうかとやってみたものの、何しろ a タグの中には何も追加出来ない仕様ので却下。仕方なく苦肉の策として、リンクの文字があるところにそのリンクと同ぢ色を配置して隠すというか、カメレオンしたようなデザインの画像を作って背景に指定したらいいんでないかい？　という訳の分からない企みを以て画像を制作したものの、あまりセンスのいいものではなく、色々がっくり愕然とする日々。
要するに a タグに letter-spacing:12px; を指定して文字間を空け、その間 12px に画像で実際に表示させたい文字を書き、その間をリンク指定した色で塗り潰しただけという、実際に見たほうが早いので以下。

字間にある四角いところに「続きを読む」の文字がカメレオンすることになるわけです。あさはかなアイディア〜ん♪

簡単に出来るかなと思っていたのに、FireFox やら IE やらで letter-spacing の挙動が少し違ったりなんだりその他色々不都合が生ぢて、それをなんとかするためにCSSハックを用いてうだうだやっていたら今日のPVが無駄に増えました。いやん。
でも、だましだましなんとかなったような気がしないでもない感ぢがなきにしもあらず的な状況、しかしCSSハックにも色々あるもんだと感心しました。あまり使いたくはないですが。取り敢えず、IE6、7、8、Opera、Chrome は多分大丈夫、FiteFox はちょっとだけ怪しい。Mac は分かりません。
味気ない「続きを読む」の文字を何かしら素敵にする妙案はないものでしょうか。はてなももうちょっとデザイン色々いぢれる仕様だといいんですが、まぁセンスいい人はこの仕様のなかでバリバリ素敵なテーマを作ってらっしゃいますが、要はセンスの問題。