title: making an arrow with before + after
body: <p>Good day
  I have a a link which must have text + arrow looking like this:</p>
  
  <p><a href="https://i.stack.imgur.com/uNvQo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uNvQo.png" alt="enter image description here"></a></p>
  
  <p>I have done arrow,but dont know how to make that white background 
  the thing is i have to use pseudoelements</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hiretext{
   margin-top:185px;
   padding:5px 2px 5px 5px;
   position:absolute;
   background-color: #1a1e27;
   color:white;
   font-family:FrutigerCELight,Arial,Helvetica,sans-serif;
   font-size:20px;
   text-transform: uppercase;
   font-weight: 900;
  }
  .hirelink{
   display:inline-block;  
     width: 0;   
     height: 0; 
   border-top: solid transparent;
   border-bottom: solid transparent;
   border-left: solid black; 
   border-width:7px;
   content:' ';
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="hiretext"&gt;
    &lt;a href="#" class="hirelink"&gt;
     hire us
    &lt;/a&gt;
  &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>