在網站開發中，要實現類似于購物車數量、消息數量等右上角數據展示的效果，通常可以使用 CSS 語言輕松實現。這里介紹兩種方式。

第一種方式是使用偽元素 ::after 創建一個裝飾物，在里面嵌套一個 span 元素，用于展示數量。實現代碼如下：

.red-dot {
position: relative;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
}
.red-dot::after {
content: '';
position: absolute;
top: -8px;
right: -8px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: white;
}
.red-dot span {
display: block;
position: absolute;
top: -10px;
right: -8px;
width: 16px;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: center;
color: red;
}

上面的代碼中，首先定義了一個紅色背景圓形元素 .red-dot，然后在其 ::after 偽元素中創建了一個白色背景圓形裝飾物，最后在 span 元素中展示數量。通過絕對定位來實現元素的位置定位。

第二種方式是使用偽類 :before 創建一個包含數量的元素，同時設置它的位置和樣式。實現代碼如下：

.red-circle {
position: relative;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
color: white;
text-align: center;
line-height: 20px;
font-size: 12px;
}
.red-circle:before {
content: attr(data-count);
display: block;
position: absolute;
top: -10px;
right: -8px;
width: 16px;
height: 20px;
border-radius: 10px;
background-color: white;
color: red;
font-size: 12px;
text-align: center;
}

上面的代碼中，首先定義了一個紅色背景圓形元素 .red-circle，然后使用 :before 偽類創建了一個包含數量的元素，并設置它在右上角的位置。通過給 :before 偽類中的 content 屬性設置 attr(data-count) 值來動態展示數量。

這兩種實現方式都可以輕松實現右上角數據的展示效果，可以根據實際需求選擇相應的方式。