在網頁設計中，CSS是一個十分重要的技術，它可以為我們的網頁添加各種各樣的樣式，比如：顏色、字體、大小等，使我們的頁面更加美觀和易于閱讀。而今天要介紹的就是利用CSS顯示浮動文字的方法。
首先，我們需要新建一個HTML頁面，并在頁面中添加一段文本：
<body> <p>這是一段需要添加浮動文字的文本。</p> </body>
接下來，我們需要在CSS中添加如下代碼：
p:hover::after {
content: '這是一段浮動的文字。';
position: absolute;
top: -20px;
left: 0;
padding: 5px;
background-color: #333;
color: #fff;
border-radius: 5px;
}在上面的代碼中，我們使用了:hover偽類來指定鼠標懸停在該段落上時的樣式。同時，我們使用了::after偽元素來添加一個在p元素后面的偽元素，并在其中添加了我們需要浮動的文字。
接下來，我們使用了position:absolute來定義這個偽元素的位置，并使用top:-20px和left:0來將它放在p元素的上方。同時，我們使用了padding、background-color、color、以及border-radius等屬性來定義這個偽元素的邊框、背景色和圓角。
最后，在瀏覽器中預覽該頁面時，你會發現當鼠標懸停在p元素上方時，會出現一個黑色的氣泡，并顯示著我們添加的浮動文字。而當鼠標移開時，這個氣泡也會消失。
這樣，我們就成功利用CSS顯示了浮動文字，讓我們的網頁更加生動有趣。
上一篇css縱向多級菜單欄
下一篇css鼠標溢出效果