We need a css property that makes the animation right to left. So can you do it at all?

Question

css

here the animation happens from right to left, but how to do it from left to right?

.top-main-nav ul li a::after {
  margin-left: 10px;
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: #000;
  transition: width .3s;
}

.top-main-nav ul li a:hover::after {
  width:calc(100% - 10px)
}

link to the sandbox https://codepen.io/anon/pen/OvvEqd
you need to make the bottom border appear from right to left

Answer 1

https://codepen.io/topicstarter/pen/QmmxeW right?