在網頁開發中，我們經常需要使用鼠標移入文字時出現提示框來提供更多信息。這種效果可以通過CSS中的:hover偽類和content屬性來實現。

/* 示例代碼 */
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip:hover::before {
content: attr(data-tooltip);
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
padding: 5px;
border-radius: 5px;
background-color: rgba(0,0,0,0.8);
color: #fff;
font-size: 14px;
opacity: 0;
transition: opacity 0.3s ease;
}
.tooltip:hover::after {
content: "";
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent rgba(0,0,0,0.8) rgba(0,0,0,0.8);
border-width: 0 10px 10px 10px;
opacity: 0;
transition: opacity 0.3s ease;
}
.tooltip:hover::before,
.tooltip:hover::after {
opacity: 1;
}

代碼中，我們首先創建了一個.tooltip類用來給需要添加提示的文本加上樣式，并設置了position: relative來為后面的position: absolute留出一個參照物。

然后在.tooltip:hover::before中添加content: attr(data-tooltip)來顯示提示內容，其中data-tooltip是我們為.tooltip添加的自定義屬性；position: absolute將提示框定位在.tooltip上方；opacity: 0; transition: opacity 0.3s ease;則為后面的漸變動畫效果做準備。.tooltip:hover::after則利用CSS中的旋轉和邊框屬性來制作了一個小三角形作為提示框的箭頭。

最后，通過.tooltip:hover::before, .tooltip:hover::after { opacity: 1; }來為提示框和箭頭添加淡入動畫效果。

這樣，當鼠標移入.tooltip元素時，就會自動觸發提示框效果。