在網頁設計中，經常需要為用戶提供一些實時的動態信息。這些信息可以通過一些跟蹤圖標來呈現，如“通知圖標”，也稱為“bell圖標”。這篇文章將介紹如何使用CSS創建一個簡單的bell圖標，并且在用戶有新通知時進行狀態更新。

/* 創建基本的bell圖標 */
.bell {
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
border: 2px solid #333;
}
.bell:before {
content: "";
position: absolute;
top: -8px;
right: -5px;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #f00;
display: none;
}
/* 當有新通知時更新狀態 */
.bell.new:before {
display: block;
}

如上示例代碼所示，使用CSS創建bell圖標需要一個基本的圓形作為圖標主體，然后在圖標的頂部添加一個小圓形，用作提示點。提示點的狀態可以使用CSS中的“display”屬性來控制。當有新通知時，將“display”屬性設置為“block”，這樣提示點就可以顯示出來了。

要使用這個樣式，只需在HTML中添加以下代碼：

這樣，一個基本的bell圖標就會被渲染出來。當有新通知時，只需要在bell元素上添加“new”類即可更新提示點的狀態:

這個簡單的CSS樣式可以為網頁提供實時的動態信息呈現，增強用戶交互體驗。同時，使用CSS樣式也可以輕松擴展bell圖標的功能，例如添加聲音提示、更改提示點的顏色等等。