デイトラweb制作上級編　 DAY31~44⑤

<a href="#" class="head__link">
    <div class="head__more">View more</div>
    <div class="head__button">
        <div class="head__arrow"></div>
    </div>
</a>

.head__link {

    &:hover .head__arrow::before {
        width: 145.53px;
        right: -26.03px;
    }

    &:hover .head__arrow::after {
        right: -26.03px;
    }

    &:hover .head__arrow-another::before {
        width: 145.53px;
        right: -26.03px;
    }

    &:hover .head__arrow-another::after {
        right: -26.03px;
    }
}

// 矢印
.head__arrow {
    position: relative;

    &::before {
        position: absolute;
        content: "";
        width: 94.5px;
        top: 25px;
        right: 25px;
        border-bottom: 2px solid #fff;
        transition: all 0.3s ease 0s;

        @include mq('sp') {
            width: 64.5px;
            top: 20px;
            right: 20px;
        }
    }

    &::after {
        position: absolute;
        content: "";
        width: 14px;
        height: 2px;
        top: 20px;
        transform: rotate(38deg);
        right: 25px;
        border-bottom: 2px solid #fff;
        transition: all 0.3s ease 0s;

        @include mq('sp') {
            top: 15px;
            right: 20px;
        }
    }
}

<div class="case__item">
    <a href="#">
        <div class="case__image"><img src="./img/img-case05.png" alt=""></div>
        <div class="case__name">EEE株式会社　様</div>
        <div class="case__item-under">
            <div class="case__square">ビジネス留学プログラム</div>
            <div class="case__item-button"></div>
        </div>
    </a>
</div>

.case__item {

    a {

        &:hover .case__item-button::before {
            right: 0;
            border-color: #FFF400;
        }

        &:hover .case__item-button::after {
            right:11px;
            border-color: #FFF400;
        }
    }
}

.case__item-button {
    position: relative;
    margin-left: auto;

    &::before {
        position: absolute;
        content: "";
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        width: 29.25px;
        height: 29.25px;
        border: 3px solid #fff;
        border-radius: 50%;
        transition: all 0.3s ease 0s;

        @include mq('sp') {
            right: 0;
        }
    }

    &::after {
        position: absolute;
        content: "";
        right: 19px;
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
        width: 11px;
        height: 11px;
        border-right: 3px solid #fff;
        border-bottom: 3px solid #fff;
        transition: all 0.3s ease 0s;

        @include mq('sp') {
            right: 11px;
        }
    }
}