first pseudo class won't work in style components - styled-components

Question

The first pseudo class in the styled.q isn't working. It will not appear on the screen. If I copy and paste it so that ::before is listed first it doesn't work. If I list the first pseudo class a second time it works.
const ResearchingRyan = styled.div`
height: 100vw;
width: 100vw;
background-image:url(${phonePic});
background-repeat: no-repeat;
background-position: left;
background-size: cover;
display:flex;
flex-direction:column;
justify-content: flex-end;
align-items: center;
#media screen and (min-width: 525px) {
background-image:url(${tabletPic});
height: 500px;
width: 500px;
}
#media screen and (min-width: 1100px) {
background-image:url(${desktopPic});
height: 500px;
width: 500px;
}
`
const QuoteP = styled.p `
background-color:${dark};
color:${bgAlt};
padding:1rem
`
const QuoteQ=styled.q`
quotes: "\201C", "\201D";
&::after {
content: close-quote;
font-weight: bold;
font-size: 36px;
color:${bgAlt};
}
&::before {
content: open-quote;
font-weight: bold;
font-size: 36px;
color:${bgAlt};
}
`;

Answer 1

In "QuoteQ" component you need to correct "quotes" property. You write is correct, but sometimes in styled components meet especially work with unicode in something properties, example is "quotes".
Because of this, styles were not applied to pseudo-elements. Because style processing stopped at the quotes property. Correct the quotes and everything will work.
Below represent code with correct "quotes" property. And link to codesandbox with demo with this code.
https://codesandbox.io/s/styled-components-forked-1r1qc5
Also link to github issue with like problem.
https://github.com/styled-components/styled-components/issues/3413
const QuoteQ = styled.q`
quotes: "\\201c" "\\201d";
&::after {
content: close-quote;
font-weight: bold;
font-size: 36px;
color: blue;
}
&::before {
content: open-quote;
font-weight: bold;
font-size: 36px;
color: red;
}
`;