【CSS】borderの長さを文字に合わせる方法

divなどのブロック要素にborderを指定すると横幅いっぱいの長さになってしまいます。

「下線を文字の長さに合わせるにはどうすればいいの!?」

borderの長さを文字に合わせる方法を解説します。

方法1.width:fit-contentを指定する

borderの長さを文字に合わせるには横幅を文字に合わせる必要があります。

widthは横幅を指定するCSSです。この値をfit-contentにすると子要素に合わせて最小値になります。

<style>
.example{
    /*コレ*/width: fit-content;
    border-bottom: 2px solid #000;
}
</style>
<div class="example">display: inline-block</div>

fit-contentはIEでは効かないため、IEも考量する場合は後述の方法を使いましょう。

方法2.display:inline-blockを指定する

インライン要素かインラインブロック要素にすると横幅が子要素に合わせて最小の幅となり、文字に合わせることができます。

<style>
.example1{
    /*コレ*/display: inline-block;
    border-bottom: 2px solid #000;
}
</style>
<div class="example1">display: inline-block</div>

「display: inline-block」は要素をインラインブロック要素にするCSSです。

「display: inline」は要素をインライン要素にするCSSです。

displayについて詳しくはこちら↓

両者ともにborderの長さを文字に合わせることができますが、改行されるとき違いが出ます。

改行された時を想定して指定しましょう。

方法3.widthをem指定する

「em」は文字サイズを基準とした単位です。

文字数が6文字であれば「width:6em」と指定すると文字数に合わせた横幅となり、borderも文字に合います。

<style>
.example3{
    border-bottom: 2px solid #000;
    width: 6em;
    letter-spacing: 0;
}
</style>
<div class="example3">ブロック要素</div>

ただし、letter-spacingを指定しているとその分はみ出たり、フォントや半角英数、ブラウザによって横幅に違いがでることもあります。

【まとめ】borderの長さを文字に合わせる方法

width:fit-contentを指定する

IEを無視できるなら

display:inline-blockを指定する

改行されたときブロックに線を引きたいなら

display:inlineを指定する

改行されたとき文字に線を引きたいなら

widthをem指定する

文字数が決まっていてブロック要素を維持したいなら

以上、borderの長さを文字に合わせる方法でした。