CSS: border の長さを文字数に応じて可変にする

CSS で border の長さを文字数に応じで可変にするには、 可変としたい要素に対して「display: inline-block;」を指定します。

display プロパティは、要素の表示形式を指定するプロパティです。 値として「inline-block」を指定すると、その要素はインラインレベルのブロック要素となります。

文字数に応じて可変にするサンプル

まず最初に div 要素を配置します。「display: inline-block;」がない場合は、 ブロックレベルの要素として、下のように横幅いっぱいに表示されます。


<div id="sample1">サンプル1</div>
<style>
    div#sample1 {
        border: 1px solid red;
    }    
</style>

表示結果

サンプル1

「display: inline-block;」を指定する

次にdiv 要素に対して「display: inline-block;」を指定します。 この場合はインラインレベルの要素として、要素の文字数に応じて長さが変わります。


<div id="sample2">サンプル2</div>
<style>
    div#sample2 {
        border: 1px solid red;
        display: inline-block;
    }    
</style>

表示結果

サンプル2


下線だけを引く

枠線ではなく、「下線」だけを引きたい場合は、border プロパティの変わりに、 border-bottom プロパティを指定します。


<div id="sample3">サンプル3</div>
<style>
    div#sample3 {
        border-bottom: 1px solid red;
        display: inline-block;
    }    
</style>

表示結果

サンプル3


HTML・CSS入門