title: CSS arrow. Only a portion of the arrow is being displayed
body: <p>I am trying to display a few words inside of a CSS styled arrow. I have figured out how to create an arrow with CSS which works fine. however, when I place the arrow within <code>&lt;h2&gt;</code>, complete arrow is not being displayed.</p>
  
  <p>The source code is as follows</p>
  
  <p><b>HTML</b></p>
  
  <pre><code>&lt;div style="background-color: yellow;"&gt;
      &lt;h2&gt;&lt;span style="background: green;"&gt;This is what I want&lt;/span&gt;&lt;span class="arrow-right"&gt;&lt;/span&gt;&lt;span style="margin-left: 50px;"&gt;is this what you want?&lt;/span&gt;&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><b>STYLE</b></p>
  
  <pre><code>&lt;style&gt;
      .arrow-right::after{
          content: "";
          width: 0; 
          height: 0; 
          border-top: 15px solid transparent;
          border-bottom: 15px solid transparent;  
          border-left: 15px solid green;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>The output is as follows
  <a href="https://i.stack.imgur.com/5IJo8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5IJo8.png" alt="enter image description here"></a></p>
  
  <p>The arrow pointer is not being displayed completely.  Am I using the elements wrongly?  I will need the div / h2 height to be bigger later, but at least that is not my concern right now since the arrow itself is not being displayed as desired.</p>
  
  <p><b>Edit:</b>
  Sorry for my bad drawing.  This sample below is what I want but of course the arrow would be lots nicer I just used paints to give it a quick draw.</p>
  
  <p><a href="https://i.stack.imgur.com/wuSlV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wuSlV.png" alt="enter image description here"></a></p>