Create a vertical timeline with bullet in css - css

Question

I am trying to create a vertical timeline having this codepen as reference but unfortunately it's not working for me.
My code is here in this sandbox
App.js
import styles from "./styles.module.css";
export default function App() {
return (
<div className="App">
<div className={styles.carouselContentWrapper}>
<div className={styles.year}>
<span>2021</span>
</div>
<ul className={styles.textWrapper}>
<li className={styles.text1}>Text1</li>
<li className={styles.text2}>Text2</li>
</ul>
</div>
</div>
);
}
Styles.module.css
.textWrapper ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
background: #fff;
}
.textWrapper ul li::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: inherit;
z-index: 1;
}
Any ideas on what is causing this would be much appreciated.
Note: Just to mention that I am using css modules in my original project so would like it to work by using css modules.

Answer 1

You can put text in div so you can position it:
.textWrapper ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
background: #fff;
}
.textWrapper ul li::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: inherit;
z-index: -1;
}
.textWrapper ul li div {
position: absolute;
left: 20px;
top: 25px;
color: white;
}
body {
background-color: blueviolet
}
<div class="App">
<div class={styles.carouselContentWrapper}>
<div class={styles.year}>
<span>2021</span>
</div>
<div class=textWrapper>
<ul>
<li class={styles.text}>
<div>Text1</div>
</li>
<li class={styles.text}>
<div>Text2</div>
</li>
</ul>
</div>
</div>
</div>

Answer 2

it works as reference codepan. give background color to your ul or change for li.