マウスオーバー時にscaleXの値によってアニメーションの適応範囲が変わってしまいます。

Question

実現したいこと

マウスオーバー時に疑似要素で作成しました『border-top』の横幅を0%から100％に伸びるようにアニメーションをしたいです。
『transform: scaleX(0);』から『transform: scaleX(1);』にてアニメーションをしています。

発生している問題・分からないこと

マウスオーバー時に『transform: scaleX（）』の値によってアニメーションの適応範囲が変わってしまいます。
現在は『transform: scaleX(.5);』を設定しています。
『transform-origin: top left;』の場合は対象物の左から0%～50%の位置を対象にマウスオーバー時にアニメーションされます。
『transform-origin: top right;』の場合は対象物の右から0%～50%の位置を対象にマウスオーバー時にアニメーションされます。
『transform: scale(0);』の場合はどちらにマウスオーバーしてもアニメーションされません。

おそらく対象物の大きさによってマウスオーバーの領域が変わっていると思います。

解決方法がわかりませんでした。

よろしくお願いいたします。

該当のソースコード

<div id="header-dropdown-menu-online-store-container">
   <span id="border-top-right"></span>
</div>

#header-dropdown-menu-online-store-container {
  position: relative;
  width: 10.2rem;
  height: auto;
  border: 5px solid transparent;
  text-align: center;
  margin-right: .6rem;
  padding: 1rem;
  padding-left: calc(1rem + .76rem);
}
#header-dropdown-menu-online-store-container #border-top-right::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: -2.5px;
  left: 0;
  border-top: 5px solid var(--main-color);
  transform-origin: top left;
  opacity: 0;
  transform: scaleX(.5);
  transition: opacity .3s linear, transform .3s linear;
}
#header-dropdown-menu-online-store-container #border-top-right:hover::before {
@starting-style {
    opacity: 0;
    transform: scaleX(0);
  }
    opacity: 1;
    transform: scaleX(1); 
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

はじめは『width: 0％』 から『width: 100%』のアニメーションを試して今回と同じ結果になりました。その後に僕自身で考えて色々試しました。

値を変えてみたりプロパティを消したり付けたり等、試しました。

その後に色々な単語を並べて検索をしました。
主に『AI』からの回答を試して結果が得られませんでした。

途中で対象物の範囲以外はアニメーションが適応されないことに気が付きます。

最後に『マウスオーバー時にscaleXの値によってアニメーションの適応範囲が変わってしまいます。』を
検索して『AI』からの回答を試します。

『アニメーションの基準となる要素を別途用意する』と
『アニメーションの計算を調整する』を試して出来ませんでした。

よろしくお願いいたします。

補足

特になし

Comments

[Lhankor_Mhy]

補足お願いします。

1. 『マウスオーバー時に疑似要素で作成しました『border-top』の横幅を0%から100％に伸びるようにアニメーションをしたい』とのことですが、ここでいう『border-top』とは #border-top-right のことでしょうか？
2. 1のとおりあれば、その横幅をご提示ください。#header-dropdown-menu-online-store-container の横幅と同じ、という理解で合っていますか？

[Miya_cat]

こんにちは、

1.について回答をさせて頂きます。
はい、『border-top』とは #border-top-right のことになります。

2.について回答をさせて頂きます。
はい、#header-dropdown-menu-online-store-container の横幅と同じで合っています。
横幅は『10.2rem』になります。

よろしくお願いいたします。

[Lhankor_Mhy]

補足ありがとうございます。
では、回答に変更はございません。ご不明な点がありましたらコメントしてください。

Answer 1

問題が理解できていないかもしれませんが、#header-dropdown-menu-online-store-container #border-top-right:hover::before→#header-dropdown-menu-online-store-container:hover #border-top-right::beforeではダメでしょうか？

Comments

[Miya_cat]

Lhankor_Mhyさん、ありがとうございます。

#header-dropdown-menu-online-store-container #border-top-right:hover::before→
#header-dropdown-menu-online-store-container:hover #border-top-right::beforeで解決出来ました。

本当に助かりました。