fluent-ui - Microsoft の mergeStyles() ユーティリティで "::before" 疑似クラスをフォーマットする方法は?

Question

FluentUI フレームワークの一部である Microsoft の mergeStyles ユーティリティを使用して、SCSS コードを React コンポーネントに移動しようとしています。"::before" をセレクタ プロパティとして指定する方法がわかりません。何らかの理由で、mergeStyles() は ":hover::before" を認識しましたが、それ自体では "::before" を認識しませんでした。たとえば、以下のコードのコメントを参照してください。どんな助けでも感謝します。ありがとうございました。

export const getClassNames = (): ISidebarClassNames => {
    return mergeStyleSets({
        sideNavItem: {
            position: "relative",
            selectors: {
                ":not(:last-child)": {
                    marginBottom: ".5rem",
                },
               // This works and "hover::before" does indeed triggers "scaleY(1)".  
               // Why then does "::before" not work on its own (see below)?
                ":hover::before": {
                    transform: "scaleY(1)",
                },
                // TODO: This does not work in mergeStyles() but does work if coded in SCSS. 
                "::before": {
                    content: "",
                    position: "absolute",
                    top: 0,
                    left: 0,
                    bottom: 0,
                    width: "3px",
                    backgroundColor: "red",
                    transform: "scaleY(0)",
                }
            }
        }