【伪类与伪元素】用CSS伪元素（以:before为例）插入图片

最新推荐文章于 2024-07-11 21:11:19 发布

crxk

最新推荐文章于 2024-07-11 21:11:19 发布

阅读量2.6w

点赞数 12

分类专栏：前端文章标签： html css web css3

本文链接：https://blog.csdn.net/crxk_/article/details/107338004

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

【伪类与伪元素】用CSS伪元素（以:before为例）插入图片

对于一些小图标类型的图片，若使用<img>略微有些麻烦，iconfont是一个不错的选择用起来也相当灵活，但是所需要步骤较为繁琐，今天介绍一种使用css伪元素快速插入图标的小技巧。

效果图

在这里插入图片描述

伪类与伪元素

伪类

在网上很多篇博客中并未将这两个解释清楚，很多博客直接写到利用css伪类插入图片，这种说法严格来讲是错误的。

CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态^[1]。

通俗来说就是： 我们要在某个元素处于某种状态时为其添加某个样式，但是仅仅通过dom树又无法表示这种状态，此时可以通过伪类对其添加样式。比如当鼠标滑动过某个文字时将其变为红色，可使用伪类来实现：

	<body>
		<h1 class="title">伪类</h1>
		<style type="text/css">
			.title:hover{
				color: red;
			}
		</style>
	</body>

伪元素

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式^[2]

通俗来说：我们可以使用伪元素创建在dom树中并不存在（在HTML文档中未定义这个元素，）的元素。话不多说上示例代码：

	<body>
		<!-- 在HTML文档中只定义了一个元素 -->
		<h1 class="title">HTML中定义的元素</h1>
		<style type="text/css">
			.title:hover{
				color: red;
			}
			/* 通过伪类增加一个元素 */
			.title::before{
				content: "伪类定义的元素";
				font-size: 12px;
				color: blue;
			}
		</style>
	</body>

伪类示例图

案例说明

弄清楚伪类与伪元素的区别之后，那我们就用伪元素来添加小图标。

再看一眼效果图，我们要在 “5月14日” 前加上一个日历的小图标。
在这里插入图片描述

<view class="date-text"><text>5月14日</text></view>

<text>5月14日</text>被包裹在 class=“date-text” 这一 <view></view> 元素内部，所以需要在view内部创建一个图片伪元素，具体操作看注释咯。

.date-text {
	font-size: 28rpx;
	display: flex;
	margin: 0 20rpx;
	// scss 语法，相当于 .date-text::before
	&:before {
		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%;
	}
	text {
		margin-top: 12rpx;
	}
}