CSS是前端開發中一個非常重要的部分，可以通過它來美化頁面，操作元素的樣式，而其中紅點提示消息也是開發中常用的一種效果。

紅點提示消息可以通過CSS中的偽元素:before或者after來實現。一般情況下，紅點用一個圓形div或者span來實現，然后在CSS中通過偽元素來添加父元素的內容，從而實現紅點的提示效果。

.red-dot {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
margin-right: 5px;
}
.red-dot:before {
content: attr(data-bind);
display: inline-block;
position: absolute;
right: -10px;
top: -5px;
background-color: red;
color: #fff;
font-size: 12px;
padding: 2px 5px;
border-radius: 5px;
}

在上述代碼中，我們定義了一個class為red-dot的樣式，通過它來創建一個寬高為20px的紅色圓點。然后，在它的偽元素:before中，我們使用content屬性來獲取父元素中的data-bind屬性的值，并且添加到偽元素中，從而實現紅點的提示效果。

這里需要注意一點的是，絕對定位的偽元素需要設置父元素相對定位，否則偽元素的位置可能會與實際效果不一致。

紅點提示消息是一個非常實用的提示效果，在實際開發中會經常遇到。通過使用CSS中的偽元素來實現提示文本的效果，可以使開發效率更高，代碼更簡單。