ホーム » Vaster2 »

[Blogger][Vaster2] リンクの下線をさげてみました。[Chromeのみ]

2022年01月20日更新

2019年04月24日公開

当サイトはアフィリエイト広告を使用しています

Blogger Vaster2

リンクの下線をさげてみました。[Chromeのみ]before

after

text-underline-position: under適用後のリンクの下線の位置

text-underline-position: underたまたま見つけCSSプロパティです。残念ながらChromeしか対応していないようですね :( (2019年4月現在)

text-underline-position - CSS: カスケーディングスタイルシート | MDN

text-underline-position CSS プロパティは、text-decoration プロパティにおける underline で指定される下線の位置を設定するために使われます。

developer.mozilla.org

htmlかbodyあたりに適用すればいいと思いますhtmlの例html { text-underline-position: under; }bodyの例body { text-underline-position: under; }ちなみにtext-decoration-skip-inkというプロパティを使うとこんな感じになりました（chrome）

text-decoration-skip-ink: none;適用後の下線の位置

body { text-decoration-skip-ink: none; }safari に適用させるにはベンダープレフィックスをつけた -webkit-text-decoration-skip: none; が必要なようですbody { text-decoration-skip-ink: none; -webkit-text-decoration-skip: none; /* safari用 */ }ベンダープレフィックスはこちらで付けました参考にさせていただいたサイト