Box with a triangle like a chat

Question

I want to make with CSS a rectangular box followed by a little triangle, like this. 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 {
        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);
}

<p>
Hello!!!<span></span>
</p>

Answer 1

If you want to have a border around the shape and more adaptable, try this: https://jsfiddle.net/8qg9o3a6/7/

HTML

<div class="bubble-container">This is a bubble</div>

CSS

:root {
  --right: -40px;
  --sizearrow: 20px;
  --height: 120px;
  --top: calc(var(--height)/2 - var(--sizearrow));
  --bordercolor: #000;
}

.bubble-container {
    position: relative;
    border: 2px solid var(--bordercolor);
    margin: 0 auto;
    border-radius: 10px;
    height: var(--height);
    width: 465px;
}

.bubble-container::after {
  content: '';
    position: absolute;
    right: var(--right);
    top: calc(var(--top) + 1.5px);
    width: 0;
    height: 0;
    border: var(--sizearrow) solid transparent;
    border-left-color: #fff;
}

.bubble-container::before {
  content: '';
    position: absolute;
    right: calc(var(--right) - 5px);
    top: var(--top);
    width: 0;
    height: 0;
    border: 22px solid transparent;
    border-left-color: var(--bordercolor);
}