<div class="bubble">
  <div class="bubble-text">
  <h1>Bubble info</h1>
  <hr>
  <p>this is a simple bubble effect   <br/>width CSS pseudo element </p>
</div>
</div>
body{font-family: sans-serif; background:#191919;}
.bubble-text{background:#139ee0; color:#fff; padding:7px 15px; border-radius:3px; width:350px;}

.bubble-text::after{
content:""; 
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top: 20px solid #139ee0;
position: absolute;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.