CSS腳注是指在網頁中添加注釋信息用于解釋某個元素或內容的含義。在網頁中，我們經常會遇到需要解釋一些特殊的詞語或概念，而使用CSS腳注就可以讓這些解釋信息更加清晰易懂。不僅如此，CSS腳注還可以讓網站內容更加優雅美觀，增加閱讀體驗。

在CSS中，我們可以使用:before或:after偽元素來添加CSS腳注。這兩個偽元素都可以在元素內容前或后添加額外的內容，并且可以使用content屬性來設置要顯示的內容。其中，content屬性可以設置字符串、圖片等多種類型的值。

.content {
position: relative;
}
.content:before {
content: attr(title);
position: absolute;
left: 0;
bottom: 100%;
font-size: 0.8em;
color: #666;
}
.content:after {
content: "(!)";
font-size: 0.6em;
font-weight: bold;
color: #FFA500;
vertical-align: super;
margin-left: 5px;
}

代碼中的.content類代表要添加腳注的元素，:before和:after偽元素分別表示內容前和內容后添加的腳注。通過給:before設置position: absolute來讓腳注可以相對于元素進行定位，left和bottom屬性控制腳注顯示位置。:after偽元素中的內容使用字符串顯示“(!)”，字體大小0.6em、字體加粗、顏色為橙色，使用vertical-align: super讓腳注內容垂直居中，將腳注內容與元素文字進行區分。

CSS腳注是一種強大的注釋方法，可以讓網站更具有可讀性和美觀性。通過:before和:after偽元素，我們可以非常方便地實現CSS腳注功能。需要注意的是，在進行CSS腳注設置時，要注意選擇適當的位置和風格，從而在不影響內容的前提下，提高閱讀體驗。