Исправить ширину анимированного подчеркивания на мобильном

Question

Я использую Bootstrap 4 для пользовательской темы WordPress. Я прочитал эту короткую статью, где объясняется, как создать анимированное подчеркивание при наведении курсора. На рабочем столе все работает нормально, но на мобильном телефоне подчеркивание займет 100% ширины под элементами меню. Возможно ли исправить?

вот код css, который я использую:

.top{
  position: relative;
  color: black;
}
.top:hover{
  color: rgb(28,67,63);
}
.top:hover:after{
  width: 100%;
}
.top:after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  border-bottom: 2px solid rgb(28,67,63);
  transition: 0.4s;
}

Чтобы быть более ясным, вот изображение проблемы, которая происходит

мобильное подчеркивание

Answer 1

Я решил использовать свойство отображения inline-block на мобильном телефоне.

.top{
 display: inline-block;
}

Answer 2

Сначала попробуйте расположить свой код CSS, .top: hover :: after должен идти после .top :: after ,

также, трюк, которыйна мобильном устройстве элемент занимает полную ширину, поэтому попробуйте указать конкретную ширину элемента на экранах мобильных устройств.

Попробуйте этот код, он отлично работает.

<div class="top">
   Hi
</div>

.top{
  position: relative;
  color: black;
  width: 50px;
}
.top::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  border-bottom: 2px solid rgb(28, 67, 63);
  transition: 0.4s;
}

.top:hover{
  color: rgb(28, 67, 63);
}
.top:hover::after{
  width: 100%;
}