CSSグラデーションによるリンクの下線

CSSグラデーションを使った太くならないリンクの下線は、Mediumの詳細な記事やterkel.jpのその解説とも言える記事を見てそのうちやってみようと思っていた。フォントサイズが大きい時に下線が2pxや場合によっては4pxくらいで引かれるようになるのは見た目に結構な負荷を与えるので、常に1pxで引きたいといった希望を持ってる人は多いはずだ。 このウェブサイトでは以下の要件を満たすような感じで実装した。 常に1pxで下線を引く 文字サイズに依存しない なるべくシンプルな実装 a { background-image: linear-gradient( transparent 0, transparent 50%, rgb(91, 172, 208) 50% ); background-position: 0 1.1em; background-repeat: repeat-x; backg

[chott]

[]

[oppara]

CSSグラデーションによるリンクの下線 - Weblog - http://t.co/zNjzdqtzMQ B!

[Falky]

まだ検証不足だけど、フォント依存度高すぎる気がする。このページもSource Sans Pro外してMeiryoとかMSゴシオンリーにすると.95emで描画範囲外に飛んでくっぽい。//ああ、和文書体と欧文書体でemの扱いがブレるのか。うーん

[kenzy_n]

太くならない下線