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来让效果更好看。

接下来，将鼠标移动到该元素上时，就会看到这个文字提示出现了。

通过这种方式，可以很方便地为页面上的元素添加更多信息，让用户更好地了解这些元素的作用，提升用户体验。