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">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.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%;
}
</style>
<main>
<div class="bar"></div>
</div>
<div class="item">
<p>12/09</p>
<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>
<div class="item">
<p class="time">24/09</p>
<h1>New stuff 2</h1>
<h2>loren ipsum...</h2>
</div>
<div class="item">
<p class="time">12/09</p>
<h1>New stuff 3</h1>
<h2>loren ipsum...</h2>
</div>
</main>
</html>
> Blockquote