0

文字数に応じた下線(ボーダー)をCSSで引きたい

文字数に応じた下線(ボーダー)をCSSで引きたい

タイトル周りでよく見かける、文字の幅に応じた下線の装飾があります。文字数によって自動的に横幅が変わる設定はCSSで簡単に表現できますでの見ていきましょう。

今回は、以下の3つのサンプルをご用意しました。

  1. 文字数に応じた下線
  2. 横幅を指定した下線
  3. 文字数よりも短い下線

 

順に解説していきます。

1.文字数に応じた下線を引きたいとき

タイトルの文字数によって下線の長さを自動的に可変させる場合はこちらになります。3文字であれば短く、9文字であれば長くなる。そんな感じです。

文字数に応じた下線を引きたいとき

サンプルでは、h2タグにクラス名「sample1」を付けて指定しています。

CSSでh2.sample1に対して「display: inline-block;」を指定するだけでOKです。

デモサンプル

 

2.横幅を指定して下線を引きたいとき

タイトルの文字数に関係なく、統一して横幅を揃えたい場合はこちら。px指定や%指定などお好みで指定してみてください。

横幅を指定して下線を引きたいとき

サンプルでは、h2タグにクラス名「sample2」を付けて指定しています。

CSSでh2.sample2に対して「width: 300px;」を指定し、中央揃えのためにmargin-leftとmargin-rightにautoを指定しています。

デモサンプル

 

3.文字数よりも短い下線を引きたいとき

最後にタイトルの文字数に関係なく、文字幅よりも短い下線を引きたい場合はこちら。この場合はborderプロパティではなく、疑似要素を使って表現します。

文字数よりも短い下線を引きたいとき

サンプルでは、h2タグにクラス名「sample3」を付けて指定しています。

まず、CSSでh2.sample3に対して「position: relative;」を指定します。

それから、h2.sample3:afterに対して疑似要素から空のボックスを生成して位置を調整、線の横幅と太さを指定します。

デモサンプル

 

幅を揃えたいときもあれば、短くさりげなく入れたいときもある。その時々でお好きな方法で装飾をしてみてください。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > WEB DESIGN > CSS > 文字数に応じた下線(ボーダー)をCSSで引きたい