【CSS】疑似要素で吹き出し

<style>
    .bubble {
        position: relative;
        background: #ffffff;
        border: 4px solid #000000;
        border-radius: 12px;
        padding: 20px;
        width: 300px;
        margin: 40px;
    }

    .bubble:after, .bubble:before {
        content: '';
        position: absolute;
        left: -20px;
        top: 50%;
        transform: translateY(-50%);
        border-style: solid;
    }

    .bubble:before {
        border-width: 10px 20px 10px 0;
        border-color: transparent #000000 transparent transparent;
        left: -24px;
    }

    .bubble:after {
        border-width: 8px 16px 8px 0;
        border-color: transparent #ffffff transparent transparent;
        left: -16px;
    }
</style>
<div class="bubble">
    こんにちは！これは吹き出しのサンプルです。
</div>
</body