css3 列表删除特效 |css3识别英文字母的属性

/* 定义删除线 */
del {
text-decoration: line-through;
}
/* hover显示不同的颜色 */
del:hover {
color: red;
text-decoration: none;
}
/* 添加无序列表的样式 */
ul {
list-style-position: inside;
}
/* 利用伪元素添加删除线后缀 */
li {
position: relative;
}
li:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
background: #aaa;
top: 50%;
left: 0;
z-index: -1;
}
li:after {
content: "X";
position: absolute;
right: 0;
top: 0;
font-size: 12px;
color: #aaa;
}
li:hover:after {
cursor: pointer;
color: #f00;
}

CSS3 列表删除特效的实现代码如上所示。其中，首先利用del标签定义该文字需要添加删除线。然后，鼠标悬停在文字上方时，还可以添加其他效果比如颜色，看起来更炫酷。接下来，在无序列表中，使用伪元素为每个li添加删除线的设计，以及显示删除的标志符号。当鼠标悬停在该项目上方时，可以显示一个红色的“X”，提醒用户该项目可以被删除。这些代码的使用可以大大提升网页的用户友好性和美观度。