HOME > cssAnimation > cssでborderがテキスト左下から右に伸びる動きの作り方【コピペで1分】

cssでborderがテキスト左下から右に伸びる動きの作り方【コピペで1分】

目次: cssでborderがテキスト左下から右に伸びる動きのDEMO; cssでborderがテキスト左下から右に伸びる動きの作り方解説; HTML記述; css記述

cssでborderがテキスト左下から右に伸びる動きのDEMO

※「SAMPLE」の文字にマウスをホバーすると動きます。

SAMPLE

cssでborderがテキスト左下から右に伸びる動きの作り方解説

cssでborderがテキストの左下から右に伸びる動きは、擬似要素「::after」を使用して実装できます。

1．親要素にposition: relative;を指定し擬似要素の基点とします。
2．横の動きを実装する為に「::after」にcssで横幅を0を指定します。
3．擬似要素にposition: absolute;を指定し左（left:0）下(bottom:0)に位置指定
4．:hoverされた時にX軸（横軸）の0が100%になるように指定する。
5．正しく動作していれば完成です。

HTML記述

HTMLをbody内の表示位置に記載します。

<a href="#" class="move_bottom-line">
    SAMPLE
</a>

css記述

cssを<style>~</style>または自作cssの中に記述します。

/* .move_bottom-lineを基点にします */
.move_bottom-line{
    display: inline-block;
    position: relative;
}
/* ::afterの擬似要素を作ります。 */
.move_bottom-line::after{
    content: "";
    position: absolute;
    bottom:0;
    left:0;
    width: 0;                   /* hoverしていない時の横幅は0に指定 */
    height: 2px;                /* 線の太さ */
    background-color: #01a99d;  /* 線色 */
    transition: .3s;            /* アニメーション時間 */
}
/* .move_bottom-lineがホバーされた時に線の横幅を100%にします */
.move_bottom-line:hover::after{
    width: 100%;
}