Pseudo elements not working in styled components

Question

I am using a style component, but none of the pseudo elements (::after, ::before, &:hover) are rendering correctly.

This is my code

import React, { useState } from 'react';
import styled from 'styled-components';


const ListItem = styled.li`
  font-size: 90px;
  font-weight: bold;
  cursor: pointer;
  color: transparent;
  -webkit-text-stroke: 1px white;
  position: relative;

  @media only screen and (max-width: 768px) {
    font-size: 24px;
    color: white;
    -webkit-text-stroke: 0px;
  }

  ::after {
    content: "${(props) => props.text}";
    position: absolute;
    top: 0;
    left: 0;
    color: pink;
    width: 0px;
    overflow: hidden;
    white-space: nowrap;
  }
  //${(props) => props.text}

  &:hover {
    ::after {
      animation: moveText 0.5s linear both;

      @keyframes moveText {
        to {
          width: 100%;
        }
      }
    }
  }
`;



const Works = () => {
    return (
        <Section>
          <Container>
            <Left>
              <List>
                {data.map((item) => (
                  <ListItem key ={item} text= {item} onClick={() => setWork(item)}>
                    {item}
                  </ListItem>
                ))}
              </List>
            </Left>
            <Right></Right>
          </Container>
        </Section>
    );
}

export default Works;

I saw a similar question that suggests using backslashes / double quotes

Why are my :before & :after pseudo elements not rendering in my Styled Components?

but none of them are working. When I set the content as test, for example

content: "Test";

content: "'Test'";

content: "\Test";

none of these work.