CSS Icon 刪除

.delete-icon {
display: inline-block; /* 設置元素為行內塊級 */
position: relative; /* 設置為相對定位 */
width: 20px;
height: 20px;
}
.delete-icon:before, .delete-icon:after {
content: ''; /* 前后擴展元素的內容 */
position: absolute; /* 設置為絕對定位 */
height: 20px;
width: 2px;
background-color: #000000;
top: 0; /* 定位到頂部 */
left: 50%; /* 定位到中間 */
transform: translateX(-50%); /* 水平居中 */
}
.delete-icon:before {
transform: rotate(45deg); /* 將前向左傾斜 45 度 */
}
.delete-icon:after {
transform: rotate(-45deg); /* 將后向右傾斜 45 度 */
}

上述代碼實現了一個簡單的刪除圖標，我們通過偽元素 :before 和 :after 來實現。在 .delete-icon 中，我們首先將元素設置為 inline-block，這樣子元素就能夠在一行內水平對齊。然后，我們將其設置為相對定位，并設置寬度和高度，接著我們在 :before 和 :after 中創建兩個元素，并將它們設置為絕對定位，以達到我們所需要的效果。

通過設置元素的 transform 屬性和 rotate() 函數來將前后兩個元素旋轉 45 度。而這就是我們達到的刪除圖標效果。