在Web開發(fā)中，有時候需要在頁面中添加一些文字提示來幫助用戶更好地理解頁面上的內(nèi)容。而CSS自定義文字提示就是一種簡單而有效的方式來實現(xiàn)這個需求。

/* 定義樣式 */
.tooltip {
position: relative;
}
.tooltip::before {
content: attr(data-tip);
position: absolute;
visibility: hidden;
background-color: gray;
color: white;
text-align: center;
padding: 5px;
border-radius: 6px;
z-index: 1;
}
.tooltip:hover::before {
visibility: visible;
}

CSS自定義文字提示是通過偽元素來實現(xiàn)的，利用::before或::after來添加內(nèi)容和樣式。利用data-*屬性來傳遞提示內(nèi)容，用:hover來觸發(fā)提示的顯示。同時，還需要設(shè)置提示框的樣式，如背景色、顏色、邊框等。

在HTML中，可以通過給需要添加提示的元素添加class類名“tooltip”來使用CSS自定義文字提示，另外還需要添加data-tip屬性來傳遞提示內(nèi)容。

<p class="tooltip" data-tip="這是一個提示框">鼠標移上來試試</p>

通過CSS自定義文字提示，可以讓頁面上的內(nèi)容更加易懂，提高用戶體驗。同時，這種方式也避免了使用JavaScript等復(fù)雜的方式來實現(xiàn)提示的效果。