CSS3的after偽類可以為頁面添加很多有趣的元素，其中之一便是氣泡。在這里我們將討論如何使用CSS3的after偽類來創(chuàng)建一個漂亮的氣泡效果。

.bubble {
position: relative;
display: inline-block;
background-color: #3F51B5;
color: #fff;
padding: 8px 16px;
border-radius: 20px;
}
.bubble::after {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translate(-100%, -50%);
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid #3F51B5;
}

首先我們定義了一個帶有背景色和圓角的.bubble類，它將作為氣泡的主體。然后我們使用after偽類創(chuàng)建一個三角形，并使其定位到.bubble的左側(cè)。

我們使用絕對定位來定位三角形，并使用translate屬性將其向左移動50%。由于默認(rèn)情況下三角形是包含在.bubble元素內(nèi)的，因此我們需要使用overflow: hidden將其隱藏在邊框之外。

現(xiàn)在我們已經(jīng)創(chuàng)建了一個漂亮的氣泡，而且它是響應(yīng)式的，可以很好地適應(yīng)不同大小的屏幕。