Анимация при наведении на ссылку CSS в респонсивном меню, увеличивающаяся линия

Всем привет, надеюсь найдется знаток который поможет!! Удалось сделать вот, что 1. Компьютер: 2. Телефон: 3. Код CSS:

a.nav-link {
    color: dimgrey !important;
    font-family: "Myriad Pro";
    text-decoration: none;
    position: relative;
}
a.nav-link:hover {
    color: #009245 !important;
}
a.nav-link:after {
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #009245;
  transition: width 0.4s ease 0s, left 0.4s ease 0s;
  width: 0;
}
a.nav-link:hover:after { 
  width: 100%; 
  left: 0;
}

В мобильной версии линия под ссылкой на весь экран. Размер линии нужно ограничить до ширины слов. Так как если сделать до ширины слов, всплывающее окно будет тоже шириной слов.

Будьте добры, подскажите начинающему...