Apply :hover::after / :hover::before on Gatsby using vanilla-extract

Question

I'm trying to add a dynamic underline. When hovering the element I can't change the "after" or "before elements using CSS.

I know this can be done with plain CSS, but its not working with vanilla-extract:

import { style } from "@vanilla-extract/css"

export const gradientunderline = style({
    ":before": {
        content: "",
        display: "block",
        width: "100%",
        height: "3px",
        bottom: 0,
        left: 0,
        "-webkit-transform": "scaleX(0)",
        "-webkit-transition": "transform 0.3s ease",
        background: "linear-gradient(119.83deg, #F3BA88 22.41%, #B95BD7 42.19%, #E360D4 56.73%, #384AE8 74.14%)",
    },
    ":hover:before": {
        "-webkit-transform": "scaleX(1)",
    },
})

score 4 · Answer 1 · answered May 10 '22 at 03:27

Response from vanilla-extract team:

The styling rules accept all valid CSS properties plus simple pseudos, such as ::before or :hover etc. For anything more complex, like combinations of pseudos, you can use the selectors key.

Keep in mind that all selectors must target the applied element so take care to include the & character in the rule.

Also the supported syntax for vendor prefixes is to use the pascal case — omitting the hyphens (see below):

export const gradientUnderline = style({
  ":before": {
    content: "",
    display: "block",
    width: "100%",
    height: "3px",
    bottom: 0,
    left: 0,
-    "-webkit-transform": "scaleX(0)",
+    WebkitTransform: "scaleX(0)",
-    "-webkit-transition": "transform 0.3s ease",
+    WebkitTransition: "transform 0.3s ease",
    background: "linear-gradient(119.83deg, #F3BA88 22.41%, #B95BD7 42.19%, #E360D4 56.73%, #384AE8 74.14%)",
  },
-  ":hover:before": {
-    "-webkit-transform": "scaleX(1)",
-  },
+  selectors: {
+    "&:hover::before": {
+      WebkitTransform: "scaleX(1)",
+    },
+  },
})

Apply :hover::after / :hover::before on Gatsby using vanilla-extract

1 Answers1