當我們在網頁上瀏覽一些鏈接時，通常會發現鼠標滑過這個鏈接時，鏈接下方會出現一些提示信息，這些提示信息通常就是使用CSS的hover偽類來實現的。當鼠標移動到鏈接上時，我們可以通過使用hover偽類來改變鏈接的樣式，比如改變鏈接的背景顏色或者文字顏色等等，這可以讓我們更好地突出鏈接的重要性。

a:hover { color: #f00; }

但是，除了改變鏈接樣式以外，我們也可以使用hover偽類來顯示出一些提示信息。比如，如果我們想在鼠標滑過鏈接的時候顯示出一個文本框，我們可以使用CSS的:hover偽類來實現：

a:hover::before {
content: "我是提示信息";
display: block;
position: absolute;
top: 20px;
left: 0;
padding: 5px;
background-color: #ccc;
}

上面的代碼中，我們使用了:before偽類來創建一個偽元素，然后使用content屬性指定了要顯示的內容，接著設置顯示樣式和位置，最后設置背景色和內邊距。這樣，在鼠標滑過鏈接時，就會顯示出一個文本框，里面顯示了我們想要的提示信息。

除了:before偽類，我們也可以使用:after偽類來創建偽元素。兩種偽類的差別在于:before偽類創建的偽元素會出現在當前元素的內容之前，而:after偽類創建的偽元素則會出現在元素的內容之后。

a:hover::after {
content: "我也是提示信息";
display: block;
position: absolute;
top: 50px;
left: 0;
padding: 5px;
background-color: #ccc;
}

上面的代碼中，我們使用了:after偽類來創建一個偽元素，然后使用content屬性指定了要顯示的內容，接著設置顯示樣式和位置，最后設置背景色和內邊距。這樣，在鼠標滑過鏈接時，就會顯示出另外一個文本框，里面顯示了我們想要的另一個提示信息。