CSS是一種非常強大的樣式表語言，可以用來控制網(wǎng)頁元素的樣式和布局。在實際開發(fā)中，我們經(jīng)常會用到一些特殊的效果，比如在圖像或鏈接之上顯示一些文字，這些文字就稱為title。

img {
position: relative;
/* 將title放在圖片上方 */
}
img:hover:after {
content: attr(title);
position: absolute;
top: 0;
left: 50%;
padding: 5px;
background-color: #000;
color: #fff;
font-size: 12px;
opacity: 0;
/* 透明度設(shè)置為0 */
transform: translate(-50%, -100%);
/* 向上移動 */
transition: all 0.3s ease;
/* 過渡效果 */
}
img:hover:after {
opacity: 1;
/* 當(dāng)鼠標(biāo)移動到圖片上時，透明度設(shè)置為1 */
transform: translate(-50%, -110%);
/* 移動更遠的距離 */
}

上述代碼中，我們使用了一個偽元素:after，用于在圖片的上方顯示title文字。首先，將圖片的position屬性設(shè)置為relative，這樣偽元素會相對于圖片進行定位。然后，使用content屬性設(shè)置title的內(nèi)容，position屬性設(shè)置為absolute，將偽元素放在圖片上方。通過padding、background-color、color和font-size屬性，我們可以將偽元素設(shè)計成一個漂亮的黑色半透明背景。最后，使用opacity、transform和transition屬性來控制偽元素的顯示和隱藏效果。