[core] Fix CSS2 vs. CSS3 ::before syntax

See https://stackoverflow.com/questions/7327326/what-is-the-difference-between-before-and-before for why.

Author: oliviertassinari

apps/zero-runtime-next-app/src/components/Slider/ZeroSlider.tsx

@@ -327,7 +327,7 @@ const SliderThumb = styled('span', {
   transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
     duration: theme.transitions.duration.shortest,
   }),
-  '&:before': {
+  '&::before': {
     position: 'absolute',
     content: '""',
     borderRadius: 'inherit',
@@ -388,7 +388,7 @@ const SliderThumb = styled('span', {
       style: {
         width: 12,
         height: 12,
-        '&:before': {
+        '&::before': {
           boxShadow: 'none',
         },
       },
@@ -454,7 +454,7 @@ const StyledSliderValueLabel = styled(SliderValueLabel, {
         top: '-10px',
         transformOrigin: 'bottom center',
         transform: 'translateY(-100%) scale(0)',
-        '&:before': {
+        '&::before': {
           position: 'absolute',
           content: '""',
           width: 8,
@@ -478,7 +478,7 @@ const StyledSliderValueLabel = styled(SliderValueLabel, {
         right: '30px',
         transform: 'translateY(-50%) scale(0)',
         transformOrigin: 'right center',
-        '&:before': {
+        '&::before': {
           position: 'absolute',
           content: '""',
           width: 8,

apps/zero-runtime-vite-app/src/Slider/ZeroSlider.tsx

@@ -325,7 +325,7 @@ const SliderThumb = styled('span', {
   transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
     duration: theme.transitions.duration.shortest,
   }),
-  '&:before': {
+  '&::before': {
     position: 'absolute',
     content: '""',
     borderRadius: 'inherit',
@@ -386,7 +386,7 @@ const SliderThumb = styled('span', {
       style: {
         width: 12,
         height: 12,
-        '&:before': {
+        '&::before': {
           boxShadow: 'none',
         },
       },
@@ -452,7 +452,7 @@ const StyledSliderValueLabel = styled(SliderValueLabel, {
         top: '-10px',
         transformOrigin: 'bottom center',
         transform: 'translateY(-100%) scale(0)',
-        '&:before': {
+        '&::before': {
           position: 'absolute',
           content: '""',
           width: 8,
@@ -476,7 +476,7 @@ const StyledSliderValueLabel = styled(SliderValueLabel, {
         right: '30px',
         transform: 'translateY(-50%) scale(0)',
         transformOrigin: 'right center',
-        '&:before': {
+        '&::before': {
           position: 'absolute',
           content: '""',
           width: 8,

docs/data/base/components/select/UseSelect.js

@@ -138,7 +138,7 @@ const Option = styled('li')(
     outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
-  &:before {
+  &::before {
     content: '';
     width: 1ex;
     height: 1ex;

docs/data/base/components/select/UseSelect.tsx

@@ -141,7 +141,7 @@ const Option = styled('li')(
     outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
-  &:before {
+  &::before {
     content: '';
     width: 1ex;
     height: 1ex;

docs/data/joy/components/card/InstagramPost.js

@@ -30,7 +30,7 @@ export default function InstagramPost() {
         <Box
           sx={{
             position: 'relative',
-            '&:before': {
+            '&::before': {
               content: '""',
               position: 'absolute',
               top: 0,

docs/data/joy/components/card/InstagramPost.tsx

@@ -30,7 +30,7 @@ export default function InstagramPost() {
         <Box
           sx={{
             position: 'relative',
-            '&:before': {
+            '&::before': {
               content: '""',
               position: 'absolute',
               top: 0,

docs/data/joy/getting-started/templates/team/App.tsx

@@ -422,7 +422,7 @@ export default function TeamExample() {
                     <ListItem key={companyIndex} sx={{ alignItems: 'flex-start' }}>
                       <ListItemDecorator
                         sx={{
-                          '&:before': {
+                          '&::before': {
                             content: '""',
                             position: 'absolute',
                             height: '100%',

docs/data/material/components/accordion/CustomizedAccordions.js

@@ -13,7 +13,7 @@ const Accordion = styled((props) => (
   '&:not(:last-child)': {
     borderBottom: 0,
   },
-  '&:before': {
+  '&::before': {
     display: 'none',
   },
 }));

docs/data/material/components/accordion/CustomizedAccordions.tsx

@@ -15,7 +15,7 @@ const Accordion = styled((props: AccordionProps) => (
   '&:not(:last-child)': {
     borderBottom: 0,
   },
-  '&:before': {
+  '&::before': {
     display: 'none',
   },
 }));

docs/data/material/components/checkboxes/CustomizedCheckbox.js

@@ -32,7 +32,7 @@ const BpIcon = styled('span')(({ theme }) => ({
 const BpCheckedIcon = styled(BpIcon)({
   backgroundColor: '#137cbd',
   backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-  '&:before': {
+  '&::before': {
     display: 'block',
     width: 16,
     height: 16,