吹き出し風リスト

<ul class="list-speech-bubble">
  <li>このツール、とても便利！</li>
  <li>軽くて表示が速いよ！</li>
  <li>カスタマイズも簡単だった！</li>
</ul>

.list-speech-bubble {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}

.list-speech-bubble li {
  position: relative;
  background: #e0f2fe;
  color: #0369a1;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  width: fit-content;
  max-width: 90%;
}

.list-speech-bubble li::after {
  content: "";
  position: absolute;
  top: 12px;
  left: -10px;
  border: 6px solid transparent;
  border-right-color: #e0f2fe;
}