title: How to add ::after in the HTML link tag
body: <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>