У меня есть <a> (Edit diagram + icons)
внутри <ul><li>...</ul></li>

Я хочу добавить клик способный и зависание в состоянии значок стрелки внутри этого <a>

Итак, я создал кнопку с дисплеем: содержимое , некоторый код :
...
<li class="active">
<a href="#"><span class="fa fas fa-edit mr-3"></span> Edit diagram
<button onclick="location.href='/drawdiagram'" class="fas fa-reply mr-3" style="display: contents">
</button>
</a>
</li>
...
И вот моя проблема. Посмотрите на этот экран:

Внутри моего тега кнопки было добавлено <span>
... Этот промежуток добавляет немного css, я имею в виду некоторый paddding et c. И результат на том снимке -.-
Этот зеленый прямоугольник раздражает меня. Для начала это добавление поля снизу к моему <li>
. Для второго и худшего, это добавление дополнительной области, где я могу двигать мышью, и моя стрелка будет зависать.

Моя мышь может будь там, и стрелка будет зависать все время -.-
Это дополнительное <span>
добавлено jQuery, но я не хочу рыться в библиотеке.
Так что вопрос, у кого-нибудь есть идея, что я могу сделать с этим? У меня была идея удалить «каким-то образом» этот промежуток, используя JavaScript или jQuery, но у меня есть понятия не имею, как это сделать. Или, может быть, я могу «как-то» удалить его, используя css. Но помни, я не хочу рыться в библиотеке.