CSS文本提示效果可以為網站頁面增添額外的交互性，提供更好的用戶體驗。以下是一些常用的CSS文本提示效果：

.tooltip {
position: relative;
}
.tooltip:hover::before {
content: attr(title);
position: absolute;
top: -30px;
left: 0;
padding: 5px;
background-color: #333;
color: #fff;
border-radius: 5px;
white-space: nowrap;
}
.tooltip:hover::after {
content: "";
position: absolute;
top: -10px;
left: 50%;
margin-left: -5px;
border: 5px solid transparent;
border-bottom-color: #333;
}

上述代碼顯示了一種簡單的CSS懸停提示效果。在包含提示文本的元素上添加類“tooltip”，將在懸停時通過偽元素“::before”和“::after”來呈現提示框和箭頭。可以根據需要自定義樣式。

另一個常用的CSS提示效果是工具提示。以下是一些示例代碼：

.tooltip {
position: relative;
}
.tooltip:hover::after {
content: attr(title);
position: absolute;
top: 20px;
left: 0;
padding: 5px;
min-width: 100px;
max-width: 200px;
background-color: #333;
color: #fff;
font-size: 14px;
text-align: center;
border-radius: 5px;
z-index: 999;
}
.tooltip:hover::before {
content: "";
position: absolute;
top: 10px;
left: 50%;
margin-left: -5px;
border: 5px solid transparent;
border-bottom-color: #333;
}

這個工具提示效果在懸停時顯示一個提示框，并使用偽元素“::before”呈現箭頭。可以根據需要自定義樣式。

CSS提示效果可以增強網站頁面的交互性和易用性。在設計網站時，考慮使用這些技術來提供更好的用戶體驗。在添加CSS樣式時，請牢記可訪問性和網絡性能，并使用HTML屬性“title”來提供文本提示。