在CSS中使用 ::before 和 ::after 伪元素可以实现自定义图标和列表样式。这两个伪元素会在所选元素内容前（::before）或之后（::after）插入一个样式化的内容。
为了实现自定义图标，可以使用 ::before 和 content 属性，并为伪元素添加字体或图片：
.my-icon::before {
content: "\f105"; /* 使用 Unicode 实体编码表示字体图标 */
font-family: "Font Awesome"; /* 使用字体库 */
}
.my-image::before {
content: url("path/to/image.png"); /* 使用图片 */
}为了实现自定义列表样式，可以使用 ::before 或 ::after，分别为列表项和项目符号添加不同的样式：
ul {
list-style: none; /* 隐藏原有的项目符号 */
}
li::before {
content: "•"; /* 使用字符 "•" 做项目符号 */
}
li::after {
content: ""; /* 使用空内容 */
display: block;
height: 1px;
background-color: #CCC;
margin-top: 10px; /* 添加水平分割线 */
}需要注意的是，伪元素必须要设置 content 属性才能生效，否则它们将无法显示。另外，为了确保样式的可靠性，建议在使用字体图标时，引用经过验证的在线或本地字体库，并避免使用过度复杂的样式。