CSS 記分牌是一個非常實用的效果，它能夠幫助網頁設計者在頁面中添加一個專門用于顯示分數(shù)、計數(shù)和評分的框架，使得網頁內容更加鮮明、有吸引力和易于理解。下面我們來學習一下如何在網頁中添加 CSS 記分牌效果。

首先，在 HTML 中添加一個 div 元素，它將作為我們的記分牌容器：

<div class="score"></div>

然后，在 CSS 中設置 div 元素的樣式，并通過偽元素 ::before 和 ::after 來添加記分牌的文字和數(shù)字：

.score {
position: relative;
display: inline-block;
padding: 5px 10px;
background-color: #ccc;
border-radius: 5px;
color: white;
font-size: 18px;
font-weight: bold;
}
.score::before {
content: 'Score: ';
}
.score::after {
content: attr(data-score);
position: absolute;
right: 10px;
font-size: 24px;
font-weight: normal;
}

在上面的樣式中，我們設置了記分牌 div 的基本樣式，包括背景色、圓角、字體大小、字體顏色等。通過 ::before 偽元素，我們添加了“Score:”文本。然后，通過 ::after 偽元素，我們將記分牌的數(shù)據(jù)顯示在右側，此處我們通過 attr() 函數(shù)來獲取 div 的 data-score 屬性值。

最后，在 HTML 中添加 div 的 data-score 屬性值即可完成記分牌效果：

<div class="score" data-score="100"></div>

在實際應用中，我們可以根據(jù)記分牌的需求來自定義樣式和數(shù)據(jù)。例如，在評分系統(tǒng)中，我們可以根據(jù)用戶評分來動態(tài)修改記分牌的值，讓頁面更具交互性和生動性。