用伪元素实现简约聊天界面气泡效果

在设计简约的聊天界面时，伪元素（Pseudo-elements）常用于模拟对话气泡的效果。比如，我们可以通过`:before`和`:after`伪元素分别创建发送者和接收者的消息气泡。下面是一个基本的例子，展示了如何在HTML和CSS中实现：

<div class="message-container">
  <div class="message from-sender">
    <p>这是发送者的消息</p>
  </div>
  <div class="message from-receiver">
    <p>这是接收者的消息</p>
  </div>
</div>

<style>
.message-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.message {
  position: relative;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.from-sender {
  background-color: #eaf2f8;
  color: #4d90fe;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.from-sender::before {
  content: "";
  position: absolute;
  top: -10px;
  left: calc(50% - 7px); /* 气泡半径减去文字宽度的一半 */
  border-radius: 5px;
  background-color: inherit;
}

.from-receiver {
  background-color: #f2f2f2;
  color: #4d90fe;
}

.from-receiver::before {
  content: "";
  position: absolute;
  top: -10px;
  right: calc(50% - 7px);
}
</style>

这个例子中，`.from-sender`和`.from-receiver`代表发送者和接收者的气泡样式，它们通过`:before`伪元素创建出气泡形状，通过计算偏移量实现了从中心向左或右延伸的效果。