今天我們來學習如何在CSS中實現文本前面加上圖片的效果。這種效果在網站中經常用來標識重要的提示信息，讓它們更加醒目。
實現這個效果非常簡單，我們只需要使用CSS的background-image屬性即可。下面是一段示例代碼：

p {
background-image: url("提示.png");
background-repeat: no-repeat;
background-position: left center;
padding-left: 30px;
}

以上代碼中，我們通過在p標簽中設置background-image屬性來指定要顯示的圖片，并使用background-repeat屬性來指定圖片不重復。同時，使用background-position屬性來指定圖片的位置，這里我們設置為左對齊并垂直居中。最后，我們使用padding-left屬性來為文本留出一定的空間，防止文本與圖片重疊。
上述代碼可以實現文本前面加上圖片的效果，但是我們還可以對其進行進一步優化。例如，可以在鼠標懸停在文本上時，顯示一個更加明亮的圖片，讓提示更加顯眼。
我們可以通過:hover偽類來實現該效果。以下是示例代碼：

p {
background-image: url("提示.png");
background-repeat: no-repeat;
background-position: left center;
padding-left: 30px;
}
p:hover {
background-image: url("提示-懸停.png");
}

以上代碼中，我們在p:hover偽類中設置了一個新的圖片，并將其替換了原來的圖片。這樣，在鼠標懸停在文本上時，就會顯示一個更加明亮的圖片，讓提示更加顯眼。
總結一下，通過CSS的background-image屬性以及:hover偽類，我們可以輕松實現在文本前面加上圖片的效果，并且可以通過進一步設置優化提示效果。