想要讓網頁更加生動有趣嗎？不妨試試在文字上添加懸浮效果！下面我們來看看如何使用CSS來實現文字懸浮效果。

.hover-text {
position: relative;
display: inline-block;
}
.hover-text:hover::after {
content: "";
position: absolute;
left: 0;
top: 100%;
width: 100%;
text-align: center;
background-color: #333;
color: #fff;
font-size: 14px;
padding: 6px 0;
border-radius: 3px;
}

首先，我們需要將要添加懸浮效果的文字包裹在一個<span>或<p>標簽中，并添加一個自定義的類名（例如，hover-text）。接著，在CSS中，我們?yōu)檫@個類名定義一個position: relative;的屬性，以便之后絕對定位偽元素時可以參照它的位置。

然后，我們?yōu)檫@個類名添加一個懸浮狀態(tài)下的偽元素::after。在這個偽元素中，我們首先使用content: "";將它變成一個空元素，接著使用position: absolute;將它絕對定位，由于我們要讓它在文字下方顯示，所以我們設置它的top: 100%;。為了使它居中顯示，我們使用text-align: center;居中文本。在這個偽元素中，我們還可以使用其他CSS屬性來改變它的樣式，例如設置它的背景顏色、字體顏色、邊框圓角等。

最后，我們只需要將這個CSS代碼添加到你的樣式表中即可。

現在，當你的鼠標懸浮在被添加類名的文字上時，就會出現一個居中顯示的浮層，極大的豐富了你的網頁展示效果。