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