On Hover :after Element Move To Current Div

I want to move pseudo-element when we hover on the current div. Here pink color div I want to move vertically in front of the currently hovered div. Can anyone suggest to me how c

Solution 1:

This solution is on the assumption that you don't need the exact same element to move and only interested in showing it on hover. I'm still not sure what you actually want. This is done with pure CSS without the need for any JS code.

.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
}
article {
  width: 100px;
  height: 50px;
  background: red;
  position: relative;
}
.timeline-entry.right-aligned {
  align-self: flex-end;
  background: blue;
}
.timeline-entry.left-aligned {
  float: left;
}
.timeline-entry:hover {
  background: yellow;
}
.timeline-entry:hover:after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 20px;
  height: 100%;
  background: pink;
}

<div class="timeline">
  <article class="timeline-entry right-aligned"></article>
  <article class="timeline-entry left-aligned"></article>
  <article class="timeline-entry right-aligned"></article>
  <article class="timeline-entry left-aligned"></article>
</div>

I also changed the pseudo-element height to 100% since it's now contained by the article element.

UPDATE

This is another answer, followed by the question update.

article {
  height: 50px;
  position: relative;
}
article div {
  width: 100px;
  height: 100%;
}
.timeline-entry.right-aligned div {
  float: right;
  background: blue;
}
.timeline-entry.left-aligned div {
  float: left;
  background: red;
}
.timeline-entry div:hover {
  background: yellow;
}
.timeline-entry div:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - 10px);
  width: 20px;
  height: 100%;
  background: pink;
}

<div class="timeline">
  <article class="timeline-entry right-aligned"><div></div></article>
  <article class="timeline-entry left-aligned"><div></div></article>
  <article class="timeline-entry right-aligned"><div></div></article>
  <article class="timeline-entry left-aligned"><div></div></article>
</div>

There are other ways to reach this result. I've kept the CSS only approach.