Fix width of an animated underline on mobile - html

Question

I'm using Bootstrap 4 for a custom wordpress theme. I've readed this short article where is explained how to create an animated underline on hover. On desktop all works fine but on mobile the underline will take the 100% of the width under the menu elements. Is possible to fix?
here is the css code I'm using:
.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;
}
To be more clear here is an image of the problem that is happening
mobile underline

Answer 1

I've solved using the inline-block display property on mobile.
.top{
display: inline-block;
}

Answer 2

First Try to arrange your CSS code, .top:hover::after must come after .top::after,
also, the trick that on mobile the element take the full width, so try to give the element specific width on mobile screens.
Try this code, it's work fine.
<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%;
}