Skip to content

Instantly share code, notes, and snippets.

@fxcjahid
Created January 15, 2020 09:59
Show Gist options
  • Save fxcjahid/f0119757cf98c9c82b13ed555e1b1c4b to your computer and use it in GitHub Desktop.
Save fxcjahid/f0119757cf98c9c82b13ed555e1b1c4b to your computer and use it in GitHub Desktop.
Timeline CSS with Counters
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
</div>
body { font-family: Helvetica; }
div {
width: 300px;
margin: auto;
}
p {
border-top: 2px dashed;
border-color: blue !important;
margin:0; padding: 30px;
counter-increment: section;
position: relative;
}
p:nth-child(even):before {
content: counter(section);
right: 100%;
margin-right: -20px;
position: absolute;
border-radius: 50%;
padding: 10px;
height: 20px;
width: 20px;
background-color: blue;
text-align:center;
color: white;
font-size: 110%;
}
p:nth-child(odd):before {
content: counter(section);
left: 100%;
margin-left: -20px;
position: absolute;
border-radius: 50%;
padding: 10px;
height: 20px;
width: 20px;
background-color: blue;
text-align:center;
color: white;
font-size: 110%;
}
p:nth-child(even) {
border-left: 2px dashed;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
margin-right: 30px;
padding-right: 0;
}
p:nth-child(odd) {
border-right: 2px dashed;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
margin-left: 30px;
padding-left: 0;
}
p:first-child {
border-top: 0;
border-top-right-radius:0;
border-top-left-radius:0;
}
p:last-child {
border-bottom-right-radius:0;
border-bottom-left-radius:0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment