CSS中有一種很實用的效果，就是當鼠標經過一個元素時，可以顯示出關于該元素的文字，讓人們更好地了解該元素的作用或者功能。這種效果可以通過hover來實現。

.hover-text {
position: relative;
}
.hover-text:hover:after {
content: attr(data-text);
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 5px;
border-radius: 5px;
z-index: 999;
}

在這段代碼中，首先為需要顯示文字的元素添加一個類名hover-text，然后在CSS中使用after偽元素來創建一個新的元素。這個元素的內容使用attr(data-text)來獲取該元素的data-text屬性中的文本，位置使用position和top、left、transform來實現。背景顏色和文字顏色可以根據需要設定，并添加一些padding和border-radius來讓效果更好看。

接下來，將鼠標移動到該元素上時，就會看到這個文字提示出現了。

通過這種方式，可以很方便地為頁面上的元素添加更多信息，讓用戶更好地了解這些元素的作用，提升用戶體驗。