CSS3是前端開發必須要掌握的技能之一。其中，:after偽元素在設計中扮演著重要的角色。在偽元素中，我們可以使用CSS實現一些視覺效果，如添加文本、圖片等等。今天，我們就來探討一下如何使用:after和img標簽組合創造出令人炫目的效果。

首先，我們需要先定義一下div的樣式，這里我們假設div的類名為container：

.container {
position: relative;
width: 200px;
height: 200px;
background-color: #FFEEAA;
border-radius: 50%;
overflow: hidden;
}

然后，我們來添加:before和:after偽元素，代碼如下：

.container:before,
.container:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container:before {
width: 150px;
height: 150px;
background-color: #FFFFFF;
opacity: .8;
border-radius: 50%;
z-index: -1;
}
.container:after {
content: url("./image.png");
width: 100px;
height: 100px;
border-radius: 50%;
}

上面的代碼中，我們通過指定content屬性來指定:before和:after的內容。其中，:before代表了一個白色的圓形背景，覆蓋整個div，并設置了不透明度和層級。而:after則代表了一只小鳥的圖像，同樣設置了圓角和居中樣式。

最后，我們來看一下最終的效果：


如上圖所示，我們成功地將一個小鳥圖案嵌入到一個白色圓形背景中，實現了令人驚艷的效果。通過理解:before和:after偽元素的概念及CSS3中的其它新特性，我們可以創造出更多令人炫目的效果。