CSS 見出しの下線を長さ調整ができるようにする

CSS 見出しの下線を長さ調整ができるようにする

CSSで見出しに下線を表示するときにはborder-bottomを使うことが多いですが、見出しのhタグにborder-bottomを適用すると下線の長さが見出し幅でしか調整できないので、長さの調整をできるようにするCSSの書き方を理解しておこうと思います。

この記事はCSSで見出しの下線を疑似要素で表示してから下線の長さ調整をします。

 

CSSで見出しの下線を疑似要素で作成

 

見出しの下線は、見出しの位置から相対的な位置を指定したCSSの疑似要素beforeまたはafterで作成します。

 

h2{
    position: relative;
    top: 0;
    left: 0;
}

h2::before{
    position: absolute;
    bottom: 0;
    content: '';
    width: 100%;
}

 

具体的な作成方法は、下線を表示する見出しのhタグをCSSのセレクタにしてposition: relativeを適用することで下線の基準位置にしておきます。位置はtopとleftの値を0指定で見出し要素の左上を基準位置にします。

そして、下線を表示したい見出しのhタグとbeforeを使用したCSSセレクタを作成してhタグの疑似要素を作成します。

作成したh2::beforeのセレクタには、CSSのposition: absolute;とbottom: 0;を指定、contentの値は空指定します。

疑似要素の幅については、現時点ではwidth: 100%で見出し要素の幅と同じになりますが、最終的には見出しの下線だけを疑似要素のwidthの数値で長さ調整することになります。

 

Advertisement

 

見出しの下線をCSSのborder-bottomで表示

 

CSSで疑似要素を作成したセレクタには、見出しの下線をCSSのborder-bottomを記述して表示します。

以下のCSSは、前述した見出し要素の疑似要素を作成した記述に、border-bottomの値を一括指定した記述を追加しています。

 

h2::before{
    position: absolute;
    bottom: 0;
    content: '';
    width: 100%;
    border-bottom: 3px solid #cddc39;
}

 

表示結果は次の画像です。

 

 

border-bottomの値に指定した下線の太さが3pxで、形状はsolidで横線が表示、色はカラーコードで指定したイエローで見出しの下線を表示することができます。

 

CSSで見出しの下線の長さを調整する

 

見出しの下線を擬似要素で表示できてしまえば、あとはCSSで下線の長さを調整するだけです。

 

h2::before{
    position: absolute;
    bottom: 0;
    content: '';
    width: 260px;
    border-bottom: 3px solid #cddc39;
}

 

例えば見出しの下線を260pxの長さに調整するとしたら、見出しの疑似要素を作成したh2::beforeセレクタ内でwidthの値を260pxに調整します。

CSSで見出しの下線の長さを260pxで調整すると以下の画像のような長さで下線が表示します。

 

 

見出しの下線の長さ調整をするついでに縦の位置調整もする必要があるときには、事前に見出しを基準位置にして相対的な移動を可能にしたポジションにしているので、bottomの数値を調整することで見出しと下線との間隔をお好みで空けることができます。

 

Advertisement

 

見出しのセレクタにCSSのtext-align: centerでセンター寄せしている場合の下線は少し工夫が必要です。

 

 

見出しと一緒に下線がセンターに位置を移動した分、下線は長さが長くなるほど見出しの要素右いっぱいに幅が伸びてしまいます。

このようなときには、見出しの疑似要素に適用しているpositionのleft位置を50%で指定するとともに、CSSのtransformをtranslate(-50%)で記述します。

 

h2::before{
    position: absolute;
    bottom: 0;
    left: 50%;
    content: '';
    width: 260px;
    border-bottom: 3px solid #cddc39;
    transform: translate(-50%);
}

 

上記のCSSではleft: 50%とtransform: translate(-50%)を見出しの下線を表示しているh2::beforeセレクタに追加記述をして適用させています。

 

 

すると見出しの下線はどんな長さに調整するとしても見出し下の中央を維持して表示することができます。

 

まとめ

 

CSSを使用して見出しの下線を長さ調整ができるようにする書き方を説明した今回の投稿。

見出しの下線の長さを調整したいときには、CSSのbeforかafterで見出しの疑似要素を作成して表示させた下線の幅を指定するのがポイントです。

CSSの疑似要素でbeforとafterは選択した要素の子要素扱いになりますので、親要素になるhタグにposition: relativeを、見出しの下線になる疑似要素にposition: absoluteを指定して、見出しの下に線を移動して位置調整するのもお忘れなくです。

CSSカテゴリの最新記事