CODEWITHSUNDEEP
htmlcss
JoH
JoH

Reputation: 554

Why are my ::before styles showing at the ::after position?

I want to reproduce this timeline:

enter image description here

But my dotted line is after the dot when it should to be before the dot like on the image, and I don't know why.

I tried to reverse the pseudo-elements but it didn't work. I also tried to use multiple uls but the dotted line is always after the dot.

li {
     position: relative;
     margin: 0;
     padding-left: 35px;
     height: 55px;
   list-style-type: none;
}

 .past::after {
     content: '';
     position: absolute;
     left: 0;
     height: 16px;
     width: 16px;
     background-color: #ffcd00;
     border-radius: 100%;
     z-index: 1;
}

 .past::before {
     content: '';
     border-left: 2px solid #708dbb;
     position: absolute;
     bottom: 0;
     top: 0;
     left: 7px;
}

 .next {
     opacity: 0.5;
}

 .next::after {
     content: '';
     position: absolute;
     left: 0;
     height: 12px;
     width: 12px;
     border: 2px solid #ffcd00;
     background-color: #fff;
     border-radius: 100%;
     z-index: 1;
}

 .next::before {
     content: '';
     border-left: 2px dotted #708dbb;
     position: absolute;
     bottom: 0;
     top: 0;
     left: 7px;
}
<ul>
  <li class="past">Past event</li>
  <li class="past">Past event</li>
  <li class="next">Next event</li>
</ul>

Upvotes: 2

Views: 72

Answers (2)

mttetc
mttetc

Reputation: 745

You are missing one li and the top and bottom positioning aren't right, I have added some <li class="past">Past event</li> to show you that you can add as much as you want now.

li {
     position: relative;
     margin: 0;
     padding-left: 35px;
     height: 55px;
   list-style-type: none;
}

 .past::after {
     content: '';
     position: absolute;
     left: 0;
     height: 16px;
     width: 16px;
     background-color: #ffcd00;
     border-radius: 100%;
     z-index: 1;
}

 .past:not(:first-child)::before {
     content: '';
     border-left: 2px solid #708dbb;
     position: absolute;
     bottom: 100%;
     top: -100%;
     left: 7px;
}

 .next {
     opacity: 0.5;
}

 .next::after {
     content: '';
     position: absolute;
     left: 0;
     height: 12px;
     width: 12px;
     border: 2px solid #ffcd00;
     background-color: #fff;
     border-radius: 100%;
     z-index: 1;
}

 .next::before {
     content: '';
     border-left: 2px dotted #708dbb;
     position: absolute;
     bottom: 100%;
     top: -100%;
     left: 7px;
}
<ul>
  <li class="past">Past event</li>
  <li class="past">Past event</li>
  <li class="past">Past event</li>
  <li class="past">Past event</li>
  <li class="next">Next event</li>
</ul>

Upvotes: 2

Dan Knights
Dan Knights

Reputation: 8378

You're using top and bottom to set the height.

If you set the lines height to 100% and then set top: -100% they will start before the circles:

li {
  position: relative;
  margin: 0;
  padding-left: 35px;
  height: 55px;
  list-style-type: none;
}

.past::after {
  content: '';
  position: absolute;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #ffcd00;
  border-radius: 100%;
  z-index: 1;
}

.past::before {
  content: '';
  border-left: 2px solid #708dbb;
  position: absolute;
  height: 100%;
  top: -100%;
  left: 7px;
}

.next {
  opacity: 0.5;
}

.next::after {
  content: '';
  position: absolute;
  left: 0;
  height: 12px;
  width: 12px;
  border: 2px solid #ffcd00;
  background-color: #fff;
  border-radius: 100%;
  z-index: 1;
}

.next::before {
  content: '';
  border-left: 2px dotted #708dbb;
  position: absolute;
  height: 100%;
  top: -100%;
  left: 7px;
}
<ul>
  <li class="past">Past event</li>
  <li class="past">Past event</li>
  <li class="next">Next event</li>
</ul>

Upvotes: 2

Related Questions