在html中， title屬性的作用是顯示額外的資訊，當滑鼠移動到元素上時，這些提示資訊就會顯示出來。然後，title屬性的缺點也很明顯，一是原始樣式太醜，一是滑鼠移動到元素上之後，需要等待一段時間才會顯示；因此，我們可以使用偽類來解決這兩個問題。

實現步驟：

一、首先html佈局

<div title="使用css偽類模擬title屬性">title屬性</div>
<div id="title" onmouseover="onMouseHover(event)" onmouseout="onMouseOut()" data-title="使用css偽類模擬title屬性">title屬性</div>
 

二、css樣式

       使用 ::after 偽元素模擬title屬性；

       content: attr(data-title)  ：attr屬性通常和自定義屬性 data- 配合使用；

#title {
    position: relative;
}
#title:hover::before {
    content: "";
    position: absolute;
    bottom: -10px;
    z-index: 1100;
    width: 0;
    border-right: 10px solid transparent;
    border-top: 10px solid #0f0;
}
#title:hover::after {
    content: attr(data-title);
    position: absolute;
    bottom: -25px;
    z-index: 1000;
    text-align: center;
    width: max-content;
    background: #f00;
    color: #fff;
    padding: 0 6px;
    height: 25px;
    line-height: 25px;
    font-size: 12px;
}
 

三、JS 部分

       偽類模擬的title屬性樣子，想要和title本身保持一致（滑鼠到哪兒，title浮窗出現在哪兒），那麼left值就要和游標的X軸座標保持一致。

<script>
    function onMouseHover(ev) {
        document.styleSheets[0].insertRule('#title::before { left: '+ ev.pageX +'px }', 0);
        document.styleSheets[0].insertRule('#title::after { left: '+ ev.pageX +'px }', 0);
    }

    function onMouseOut() {
        document.styleSheets[0].deleteRule(0);
        document.styleSheets[0].deleteRule(0);
    }
</script>
 

這裡使用了 document.styleSheets（可以返回有網頁中所用到的樣式表組成的陣列，但不包括直接嵌在元素裡的style，可在控制檯上列印檢視具體內容） 來修改偽元素中的css屬性值，因為這部分內容比較冷門，個人的理解並不是很深，所以在這裡不做分析，大家自行百度吧！-_-||~ ~ ~ ~ ~

下圖是新增和刪除樣式的具體項，IE和非IE 用到不同的函式：

以上是使用CSS偽元素，模擬title屬性的過程， 那麼結果長什麼樣子呢？？ 現在就貼圖上來，僅供參考。