div after偽元素是CSS提供的一種偽元素，它可以在一個文檔元素的內容之后插入額外的內容或者樣式。通常，它用于在元素后面添加一些裝飾性的內容或者圖標。
在使用div after偽元素之前，我們需要先了解一些基本的CSS屬性。，我們需要使用content屬性來定義偽元素的內容，例如我們可以將其設置為一個字符串或者一個圖片的URL。然后，可以使用position屬性來給偽元素定位，常見的值為absolute或者relative。最后，可以使用其他CSS屬性來進一步定義偽元素的樣式，比如background、width、height等。
下面是一些使用div after偽元素的代碼案例，幫助我們更好地理解它的用法和效果。

案例一：添加裝飾性的箭頭

<div class="container">
<p>This is a sample text.</p>
</div>
<br>
<style>
.container::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
border: solid transparent;
border-top-color: #000;
border-width: 15px;
width: 0;
height: 0;
}
</style>

在這個案例中，我們使用div after偽元素在容器的底部添加了一個裝飾性的箭頭。偽元素的內容為空字符串，使用position屬性將其設置為絕對定位，并使用top和left屬性將其位置在容器的底部居中。通過使用border屬性和border-top-color屬性來創建箭頭的形狀，然后調整寬度和高度使其變得合適。

案例二：添加提示信息圖標

<div class="container">
<p>This is a sample text.</p>
</div>
<br>
<style>
.container::after {
content: url("info-icon.png");
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 20px;
}
</style>

在這個案例中，我們使用div after偽元素在容器的右上角添加了一個提示信息的圖標。偽元素的內容被設置為一個圖片的URL，使用position屬性將其設置為絕對定位，并使用top和right屬性將其位置在容器的右上角。通過調整寬度和高度來設置圖標的大小。
這些案例僅僅是div after偽元素的一部分用法，我們可以根據具體的需求進行更多的定制和創意。如果你想了解更多關于div after偽元素的用法，可以參考其他的相關文章和真實案例。