JSFiddle - React, Tailwind, and code Playground

HTML

<p>This <a href="#">simple link</a> shrinks 1px when hovered, only on Chrome (not on Firefox nor Safari).</p>
<p>This <a class="box" href="#">one which is set to "inline-block"</a> doesn't move but prevent word wrapping inside the link.</p>

CSS

a {
    text-decoration: none;
}
a:hover {
    color: white;
    background: lightblue;
    padding:0.3em;
    margin:-0.3em;
}
a.box {
    display: inline-block;
    border-right: .5px solid red;
}