[Support request] Top Menu Underline

I have put underline css code to TOP Menu, but I can’t change the sub menu underline padding without The main menu item, Also How to make the underline appearing in the current page?

.main-navigation li > a::after {
  bottom: 10px;
  content: "";
  display: block;
  height: 4px;
  left: 0;
  position: absolute;
  background: #f46100;
  transition: width 0.3s ease 0s, left 0.1s ease 0s;
  width: 0;
}
.main-navigation li > a:hover::after, .main-navigation li > a.active-nav::after {
    width: calc(100% - 40px);
    left: 50%;
    transform: translatex(-50%);
    bottom: 10px;
}