HTML和CSS是現代網站設計和開發中最常用的兩種語言，其中CSS（Cascading Style Sheets）是用于控制網頁布局和樣式的語言。CSS具有非常強大的能力，它可以被用于創造許多炫酷的特效，例如圖標效果。 實現圖標效果的方法之一就是使用CSS中的偽元素 :before 和 :after。這兩個偽元素可以用來在HTML元素的前面或后面插入一個虛擬的元素，然后通過CSS來控制它們的樣式。下面是一個使用 :before 和 :after 實現效果的示例：

.icon {
position: relative;
display: inline-block;
width: 32px;
height: 32px;
 }
.icon:before {
content: '';
position: absolute;
top: 0;
left: 0;
border-top: 16px solid #333333;
border-right: 16px solid transparent;
border-bottom: 16px solid transparent;
border-left: 16px solid #333333;
 }
.icon:after {
content: '';
position: absolute;
top: 8px;
left: 8px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #333333;
 }

在上面的代碼中，我們創建了一個名為 .icon 的類，并設置它的 position 屬性為 relative，為了讓后面的 :before 和 :after 偽元素可以相對于它進行定位。同時，我們還設置了 .icon 的 width 和 height，這是用來給圖標預留一個空間。 接著，我們通過 :before 偽元素來創建一個菱形圖標，它被設置為沿著 .icon 元素的左上角與右下角對角線進行旋轉。具體做法是通過設置上、右、下、左邊框的寬度和顏色來構造出這個形狀。注意，content 屬性必須設置為 ''，否則偽元素不會被創建。 最后，我們使用 :after 偽元素來創建一個小圓點，使得它出現在以前創建的菱形圖標中心處。我們將 .icon:after 的寬度和高度都設置為 16px，并對其進行了圓角處理。同時，我們還將它的背景色設置為黑色。 現在，我們只需要在 HTML 中為想要顯示圖標的元素加上這個 .icon 類名，就可以實現一個簡單的圖標效果。 總之，這種用 CSS 來實現圖標效果的方法可以讓我們更輕松和自由地控制圖標的樣式和布局，同時避免使用傳統的圖片圖標所帶來的許多不便。