For my portfolio project, I am following a tutorial by LamaDev (https://www.youtube.com/watch?v=qALsVa-V9qo&t=2334s&ab_channel=LamaDev). At around timestamp 36:40, he creates a ::after selector which is not working for me, even though the rest of the listItem works perfectly fine. How can I debug this issue? I have tried adding text or background color to the ::after pseudo element but it's not displaying any code.
Github Link:
import React from 'react';
import styled from 'styled-components';
// import './stylesheets/worksStyles.css'
const data = [
'Web Development',
'Data Science',
'DevOps',
'Low Code Platforms',
'Automation',
];
const Section = styled.div`
height: 100vh;
scroll-snap-align: center;
display: flex;
justify-content: center;
`;
const Container = styled.div`
width: 1400px;
display: flex;
justify-content: space-between;
`;
const Left = styled.div`
flex: 1;
display: flex;
align-items: center;
`;
const List = styled.ul`
list-style: none;
display: flex;
flex-direction: column;
gap: 20px;
`;
const ListItem = styled.li`
font-size: 70px;
font-weight: bold;
cursor: pointer;
color: transparent;
-webkit-text-stroke: 1px white;
position: relative;
::after {
content: "${(props) => props.text}";
position: absolute;
top: 0;
left: 0;
}
&:hover {
::after {
color: rebeccapurple;
}
}
`;
const Right = styled.div`
flex: 1;
`;
const Works = () => {
return (
<Section>
<Container>
<Left>
<List>
{data.map((item) => (
<ListItem key={item} text={item}>
{item}
</ListItem>
))}
</List>
</Left>
<Right></Right>
</Container>
</Section>
);
};
export default Works;
I have attempted different styles for the ::after pseudo element, such as changing text or background color, but nothing seems to work as expected.