疑似要素を利用して融通の利く下線を引く

慣れてしまえば、そういうものだと割り切れるのですが、スタイルシートのボーダーは長さが指定できない。

border-width は指定できるが、そこでいう「幅」はボーダーの幅(長さ)ではなく、ボーダーの太さ(線の高さ)なのです。

これって、最初に border を定義した人が、間違ってwidthにしてしまったから取り返しがつかなくなったんじゃねぇの?と思うほど不便。

height と width にしておいてくれたら良かったのに。

ぜったい、最初の人が間違ったんだコレww

 

仕方ないので、ダミーのボックス作って長さを決めたり、背景を駆使したりすることもあったのですが、自由度で言うと疑似要素を使用するのが一番かなと。

私の説明なんかより、サルワカさんのページのほうが断然わかりやすいので貼っちゃう。

 

【CSS】borderの長さを調整する方法3つ:文字に応じて可変など