title: CSS onhover the caret part of a full CSS chat bubble
body: <p>Working on a chat bubble:</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>.bubble {
      display: inline-block;
      position: relative;
      width: 35px;
      height: 20px;
      padding: 0px;
      background: rgb(219, 218, 218);
      -webkit-border-radius: 16px;
      -moz-border-radius: 16px;
      border-radius: 16px;
      border:rgb(107, 107, 107) solid 2px;
  }
  
  .bubble:after {
      content: '';
      position: absolute;
      border-style: solid;
      border-width: 6px 5px 0;
      border-color: rgb(219, 218, 218)  transparent;
      display: block;
      width: 0;
      z-index: 1;
      margin-left: -5px;
      bottom: -6px;
      left: 43%;
  }
  
  .bubble:before {
      content: '';
      position: absolute;
      border-style: solid;
      border-width: 7px 6px 0;
      border-color: rgb(107, 107, 107) transparent;
      display: block;
      width: 0;
      z-index: 0;
      margin-left: -6px;
      bottom: -9px;
      left: 43%;
  }
  
  .bubble:hover {
      background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="bubble"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The onhover is currently not working for the caret part of the chat bubble. The desired result is obviously the whole chat bubble being filled up when there is an onhover event. I tried (not a CSS wiz):</p>
  
  <pre><code>.bubble:hover,  .bubble:hover:before, .bubble:hover:after{
      background-color: red;
  }
  </code></pre>
  
  <p>I also tried a lot of different stuff but it doesn't seem to work. How do I fix this?</p>