title: Box with a triangle like a chat
body: <p>I want to make with CSS a rectangular box followed by a little triangle, like <a href="http://imgur.com/kHU2lxS" rel="noreferrer">this</a>. And i've done it but i would like the same output with the ":after". I've tried but i can't print anything.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>p {
          display:inline-block;
          padding:5px 6px 8px 6px;
          border-radius: 6px;
          float: right;
          margin-right: 40px;
          color:black;
          background-color:#146f79;
  }
  
  span {
              position:absolute;
              margin-top:-6px;
              margin-left:-5px;
              border-left: 12px solid transparent;
              border-right: 12px solid transparent;
              border-bottom: 12px solid #146f79;
              transform:rotate(-45deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;
  Hello!!!&lt;span&gt;&lt;/span&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>