Making circles for css timeline

I’ve ran into some troubles while making a timeline. For some reasons, the circles in item::before aren’t created once a new div with class item is made. Is it because of the padding or the position? Any help is very appreciated.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    .bar {
        position: absolute;
        left: 25%;
        height: 500px;
        border-left: 2px solid black;
    .item {       
        margin: 0 0 0 34%;
        border-bottom: 2px solid gray;
        height: auto;
        width: 350px;
    .time {
        margin: 0 0 -45px -120px;
        padding: 20px 0 0 0;
        height: auto;
        width: 60px;

    .item::before {
        position: absolute;
        content: '';
        width: 20px;
        height: 30px;
        right: 40%;
        background-color: rgb(202, 155, 25);
        border: 4px solid rgb(202, 155, 25);
        top: 30px;
        border-radius: 50%;
    <div class="bar"></div>
    <div class="item">
        <h1>New stuff</h1>
        <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, ex! Vel cupiditate fuga fugit facere, eligendi, modi at molestiae quasi a consequatur ex, blanditiis recusandae nam et</h2>
    <div class="item">
        <p class="time">24/09</p>
        <h1>New stuff 2</h1>
        <h2>loren ipsum...</h2>
    <div class="item">
        <p class="time">12/09</p>
        <h1>New stuff 3</h1>
        <h2>loren ipsum...</h2>

> Blockquote

I’m not exactly sure what you are going for here but the first thing you should probably do is add position: relative to div.item. This will make the positioning of the circle relative to each of those divs instead of the entire page.

1 Like

The circles are there, they are all just in the same position overlaid on top of each other—you can see this if you inspect the elements in the browsers developer tools. As @bbsmooth mentioned setting position: relative on the .item divs will make it so that the absolute positioning of the circle will be relative to the parent item. You’ll probably then want to adjust the size and positioning of the circles.