タグ

2012年6月12日のブックマーク (1件)

  • CSSでリンクの文字と下線の間隔(スペース)を空ける方法

    CSSでリンクの文字と下線の間隔(スペース)を空ける方法を紹介します。ビギナー向けの内容です。 変更前 変更後 1.リンクの文字と下線の間隔を空ける リンクの文字と下線の間隔を空けるには、CSSの罫線(borderプロパティ)を擬似的に利用することで実現します。 具体的には、以下のようなCSSを設定します。a要素にclass属性「foo」を設定し、CSSにクラスセレクタ「.foo」を追加します。 HTML <a class="foo" href="...">テストです</a> CSS .foo { text-decoration: none; border-bottom: 1px solid blue; padding-bottom: 2px; } 実際に設定する場合、class属性値は「foo」ではなく、意味のある適切な名称を設定してください。 2.プロパティの説明 1項で利用しているC

    kiyokichi
    kiyokichi 2012/06/12
    text-decorationじゃなくてborderを使うとか。