【CSS】border線を途中から変える方法

全体の線はborderで指定できます。

ただ、かっこいいデザインをするために下線を途中から変えたいこともありますね。

border線を途中から変える方法を解説します。

文字部分の下線を変える

<style>
.example{
    border-bottom: 3px solid #9fc9bc;
}
.example span{
    display: inline-block;
    padding: 5px 10px;
    border-bottom: 3px solid #ff3e04;
    margin-bottom: -3px;
}
</style>
<div class="example"><span>線を途中から変える</span></div>

テキストをspanで囲み、それを「display: inline-block」にします。

これにより文字サイズに合わせたサイズにできます。

幅はwidthでも調節できますが、paddingでの調整をオススメします。

マイナスマージンを利用して外側のborderに重ねましょう。線幅分マイナスしましょう。

サイズを指定して変える

<style>
.example2{
    border-bottom: 3px solid #9fc9bc;
    position: relative;
    padding: 5px 10px;
}
.example2::before{
    content: "";
    display: block;
    width: 30%;
    border-bottom: 3px solid #ff3e04;
    position: absolute;
    bottom: -3px;
    left: 0;
}
</style>
<div class="example2">線を途中から変える</div>

before・afterは要素に追加で記述できる疑似要素です。

これを使ってもう一本の線を作り既存の線に重ねます。

線の長さはwidthでpxや%で指定しましょう。

重ねるには「position: absolute」を使い「bottom」などで線の太さ分マイナスします。

グラデーションで変える

<style>
.example3{
    position: relative;
    padding: 5px 10px;
}
.example3::before{
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #ff3e04, #9fc9bc);
    position: absolute;
    bottom: -3px;
    left: 0;
}
</style>
<div class="example3">線を途中から変える</div>

線をグラデーションにすることもできます。

borderの色をグラデーションにすることもできるのですが、下線だけというのは難しいため、backgroundを使います。

先の方法でbeforeを下線として使います。

今回はborderではなくbackgroundを使うため、heightで線を表現します。

線の幅はwidth:100%を指定します。

グラデーションを指定するには下記のように指定します。

色の数を増やしたり、位置をずらしたい場合は下記記事をご覧ください。

【まとめ】border線を途中から変える方法

文字部分の下線を変える

テキストをspanで囲み、それを「display: inline-block」にします。

サイズを指定して変える

before・afterを使ってもう一本の線を作り、既存の線に重ねます。

グラデーションで変える

before・afterを線として使い、background: linear-gradientでグラデーションを指定します。

以上、border線を途中から変える方法でした。