css icon 删除 |css盒子中多列

.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 度。而这就是大家达到的删除图标效果。