render emoji on desktop browser correctly
<p><a href="https://jsfiddle.net/Lxevu6rz/" rel="nofollow noreferrer">https://jsfiddle.net/Lxevu6rz/</a></p>

<p>when I get data from client mobile app posted , and render within desktop browser the <code>a</code> tag overlap emoji if previous is rabbit icon, why? and how to solve it?<br>
I tried add css to <code>a</code> inline or inline-block but still not work</p>

<p>and another question there is some emoji (next to the girl icon) not showing correctly, how to solve it?<br>
correct one
<a href="https://i.stack.imgur.com/eiyxZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eiyxZ.png" alt="correct"></a>
<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;text! ⛷⛷ &lt;a href="/" target="_blank"&gt;#tag&lt;/a&gt; &lt;a href="/" target="_blank"&gt;#tag&lt;/a&gt; &lt;a href="/" target="_blank"&gt;@user&lt;/a&gt;&lt;/h1&gt;</code></pre>
</div>
</div>
</p>