Moreボタン(Moreという文字)にマウスオーバーすると線の右端に『★』がついているアンダーラインが右に動き、その後(時差で)右端の星が1回転する動きを実装したい。

実現したいこと

・Moreボタン(Moreという文字)にマウスオーバーすると線の右端に『★』がついているアンダーラインが右に動き、その後(時差で)右端の星が1回転する。

前提

Webサイトを作成しています。
なるべくCSSのみで実装したいです。

発生している問題・エラーメッセージ

transitionで『★』を右に移動と、360度回転は同時に可能なのですが、右に移動が完了してから360度回転をしたいです。

該当のソースコード

HTML

1<div class="more-btn-area"> 2 <a href="#" class="more-btn">More</a> 3</div>

CSS

1.more-btn-area {2 text-align: right; 3 4 &:hover .more-btn:before {5 transform: translateX(1.1vw);6 transition: transform 0.4s ease;7 }8 9 &:hover .more-btn:after {10 transform: translateX(1.1vw) rotate(360deg);11 transition: transform 0.4s 0s ease,transform 0.4s 0.4s ease;12 }13 14 .more-btn {15 position: relative;16 display: inline-block;17 font-family: "Noto Sans JP", sans-serif;18 font-weight: 300;19 text-align: right;20 font-size: 2.2vw;21 margin-right: 15vw; 22 23 &::before {24 position: absolute;25 top: 2.6vw;26 right: 0vw;27 content: "";28 width: 3vw;29 height: 0.1vw;30 background: #333333;31 transition: transform 0.4s ease;32 }33 34 &::after {35 position: absolute;36 top: 2vw;37 right: -0.6vw;38 content: "";39 display: inline-block;40 width: 1vw;41 height: 1vw;42 background: url(../images/sub-star-yellow.png) center center no-repeat;43 background-size: contain;44 transition: transform 0.4s ease;45 }46 47 }48 }

試したこと

アンダーラインと星は"more-btn"に疑似クラスで表示しています。
アンダーラインと★を右に同時に動かし、その後に星を回転させるという動きを再現したいので、

CSS

1 &:hover .more-btn:after {2 transform: translateX(1.1vw) rotate(360deg);3 transition: transform 0.4s 0s ease,transform 0.4s 0.4s ease;4}

とコーディングしてみたのですが、transitionの秒数指定はtransformの移動や回転それぞれには効かないみたいです。(うまく言語化できませんが)

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。