CSS - Triangle down
<p>How do I create an arrow down (triangle) when hovering over a link?</p>

<p>something like the result tab on CodePen, see <a href="https://css-tricks.com/snippets/css/css-triangle/" rel="nofollow">here</a></p>

<p>I was trying to create the triangle by following the the tutorial above, but no luck</p>

<pre><code> a{
  background: red;
    float: left;
    width: 30%;
    padding: 5px;
    display block
  }

  a:hover {background: green;}
</code></pre>