Как сделать чтоб вот это подчеркивание было не больше чем само слово ( чтоб оно начиналось с первой буквы и доходила до последний,не реньше и не дальше )
.navlist a:hover span /*, .gorod:hover*/ {
background-size: 100% 2px;
}
.navlist {
display: flex;
list-style: none;
}
.navlist a span /*, .gorod*/ {
display: flex;
list-style: none;
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 70%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .9s;
padding: 1.5em;
}
.navlist a {
text-decoration: none;
color: black;
}
<ul class="navlist" >
<li><a href=""><span>Доставка и оплата</span></a></li>
<li><a href=""><span>Условия возврата</span></a></li>
<li><a href=""><span>Отзывы</span></a></li>
/*<li><span class="gorod">Уфа</span></li>*/
<li class="nomer"><a href=""><span>Контакты</span></a></li>
</ul>