.underline {
    position: relative;
    /*アンダーラインの位置を決めるための基準 */
}

.underline::after {
    position: absolute;
    /*親要素であるaタグを基準に位置を指定*/
    left: 0;
    /*アンダーラインを各メニュー（aタグ）の左端に指定*/
    content: '';
    /*本来は、擬似要素に入るテキストなどを’’内に指定。今回はアンダーラインなので何も記載しない*/
    width: 100%;
    /*アンダーラインを各aタグの幅に合わせる*/
    height: 2px;
    /*アンダーラインの高さ（太さ）*/
    background: #000000;
    /*アンダーラインの色*/
}



.underline::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #000000;
    bottom: -6px;
    transform: scale(0, 1);
    transform-origin: center top;
    /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
    transition: transform 0.3s;
    /*変形の時間*/
}

.underline:hover::after {
    transform: scale(1, 1);
    /*ホバー後、x軸方向に1（相対値）伸長*/
}