CSS菜單角標是網站設計中常用的一種元素，可以在菜單項名稱的圖標或文本后添加一個小角標，以突出顯示某些特殊菜單項，引導用戶進行特定的操作。如何實現這種功能呢？下面我們來看一下相關的CSS代碼。

/* 定義一個角標樣式 */
.badge {
font-size: 0.75em; /* 字體大小改為較小 */
font-weight: bold; /* 字體加粗 */
color: #fff; /* 字體顏色為白色 */
background: #f00; /* 背景顏色為紅色 */
padding: 0.25em 0.5em; /* 內邊距進行微調 */
border-radius: 0.5em; /* 圓角半徑設置為0.5em */
}
/* 在菜單項后添加角標 */
.menu li:after {
content: attr(data-badge); /* 在偽元素中添加data-badge屬性值 */
position: absolute; /* 設置為絕對定位 */
right: -0.5em; /* 距離右邊緣為0.5em */
top: 0.75em; /* 距離頂部為0.75em */
z-index: 1; /* 控制堆疊順序 */
text-align: center; /* 內容居中 */
width: 1em; /* 寬度為1em */
height: 1em; /* 高度為1em */
line-height: 1em; /* 行高為1em */
border-radius: 50%; /* 圓角半徑設置為50% */
}

上述代碼中，我們首先定義了一個名為“badge”的角標樣式，在樣式中設置了字體大小、字體加粗、字體顏色、背景顏色、內邊距、圓角半徑等屬性。接下來，在菜單項(li)后的偽元素:after中，通過content屬性將data-badge的值添加到角標中，并設置了絕對定位、距離、居中顯示、大小和形狀等樣式。通過這樣的方式，我們就可以在HTML代碼中添加data-badge屬性來實現菜單角標的效果了。