How to add ::after in the HTML link tag
<p>There is a CSS effect for the <code>::after</code> element. For example:</p>

<pre><code>.wrapper a:hover:after, footer.main-footer a:hover:after {
   background:#ff0000;
}
</code></pre>

<p>And in the Chrome developer console, I notice that there is some link tag has <code>::after</code> inside, that will show the effect</p>

<pre><code>&lt;a href="test.com" data-term="event"&gt;Event::after&lt;/a&gt;
</code></pre>

<p>While some does not have it</p>

<pre><code>&lt;a class="back-to-portfolio" href="test2.com"&gt;All&lt;/a&gt;
</code></pre>

<p>That element does not show the effect. The problem is, how to add the <code>::after</code> to the link tag or under what conditions the <code>::after</code> will show?</p>