Pure CSS Timeline Design With Cool Hover Effects

1<div class="timeline">
2		<ul>
3			<li>
4				<span>3rd January 2022</span>
5				<div class="content">
6					<h3>What Is Lorem Ipsum?</h3>
7					<p>
8						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
9					</p>
10				</div>
11			</li>
12			<li>
13				<span>21st Jun 2019</span>
14				<div class="content">
15					<h3>What Is Lorem Ipsum?</h3>
16					<p>
17						Lorem Ipsum is simply dummy text of the printing and typesetting industry.
18					</p>
19				</div>
20			</li>
21			<li>
22				<span>15th April 2018</span>
23				<div class="content">
24					<h3>What Is Lorem Ipsum?</h3>
25					<p>
26						Lorem Ipsum is simply dummy text of the printing and typesetting industry.
27					</p>
28				</div>
29			</li>
30			<li>
31				<span>22nd Mars 2017</span>
32				<div class="content">
33					<h3>What Is Lorem Ipsum?</h3>
34					<p>
35						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
36					</p>
37				</div>
38			</li>
39		</ul>
40	</div>