伪元素的使用

ToOTOooo

已于 2024-04-17 11:47:15 修改

阅读量155

点赞数 1

文章标签：前端 html javascript

于 2024-04-17 11:02:34 首次发布

本文链接：https://blog.csdn.net/qq_44792224/article/details/137864516

版权

本文介绍了CSS伪元素`:after`的用法，展示了如何在`.box`类中使用`:after`定义元素样式，包括设置背景图片和自定义宽度、高度。同时，还提及了`.filterActived`类的`:after`元素的样式差异。

摘要由CSDN通过智能技术生成

.box::after{
        content: '';
		display: block;
		// 定义元素位置
		margin-top: 12rpx;
		margin-right: 20rpx;
		// 定义元素宽高
		width: 36rpx;
		height: 36rpx;
		// background-image无法引用本地资源，故需要用网络地址
		background-image: url($url+'calendar.png');
		background-size: 100% 100%;
}

.filterActived::after{
	content: "";  
	width:30px;
	height:3px;
	display:block;
	// background-color:#f92d1b;
	background-image: url("../../static/uni.png");
}