demo · v138

abs() / sign()

Slide the value left or right past zero. The blue dot moves by --offset, the rose bar's width is abs(--offset), and its scaleX is sign(--offset) — so the bar always points toward the dot regardless of which side it's on.

checking support…
40px
--offset— abs(--offset)— sign(--offset)—

the code

.axis { --offset: 40px; }
.dot  { transform: translateX(var(--offset)); }
.bar  {
  width: abs(var(--offset));      /* magnitude */
  transform: scaleX(sign(var(--offset))); /* direction */
}

see also