在網頁設計中，列表是經常使用的元素。但是，在一些情況下，我們會需要為列表項添加提示信息。這時，CSS中的::before和::after偽元素是非常實用的。

首先，我們可以通過設置列表項的position屬性為relative來為其創建一個參照框架。隨后，我們可以使用::before或::after偽元素并設置它的position為absolute來為列表項添加提示信息。

li {
position: relative;
}
li::before {
position: absolute;
content: '這是提示信息';
display: none;
}
li:hover::before {
display: block;
}

上述代碼中，我們為列表項的::before元素設置了一個display:none屬性，使其在鼠標未經過時不可見。當鼠標經過列表項時，我們就設定::before元素的display屬性為block，使其顯示出來。這樣一來，我們便可以為列表項添加一個簡單的提示信息。

除了簡單的文本提示，我們還可以通過CSS的各種屬性、選擇器和動畫效果為列表項添加更為豐富的提示信息。這些信息不僅可以提高網頁的使用體驗，還能夠讓網頁的設計更加個性化。