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

喵喵酱仔__

于 2024-08-09 16:06:18 发布

阅读量456

点赞数 5

分类专栏： css样式（新）文章标签： css 前端

本文链接：https://blog.csdn.net/qq_38210427/article/details/141064475

版权

css样式（新）专栏收录该内容

11 篇文章 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;
	}
}

案例2

添加一个三角形

<div class="jsc-phone-header">
      <div class="header_item" :class="{ active: !isNext, next: isNext }">
        <span>1</span>
        验证身份
      </div>
      <div class="header_item" :class="{ activeTwo: isNext }">
        <span>2</span>
        绑定手机号码
      </div>
    </div>
 
 
 <div class="dialog-footer" style="border-top: 1px solid #dcdee0">
        <el-button @click="closePhoneDialog">取消</el-button>
        <el-button type="primary" @click="saveOrNext(phoneFormRef)">
          {{ isNext ? "完成" : "下一步" }}
        </el-button>
      </div>
 
 
 
.jsc-phone-header {
  display: flex;
  justify-content: center;
  margin: auto;
  margin-bottom: 30px;
  width: 81%;
  height: 36px;
  background: #f2f3f5;
  .header_item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    position: relative;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #999999;
    span {
      display: inline-block;
      width: 18px;
      height: 18px;
      background: #999999;
      color: #ffffff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 11px;
    }
  }
  .active {
    background: #477fff;
    color: #ffffff;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: -18px;
      width: 0;
      height: 0;
      border-top: 18px solid transparent;
      border-bottom: 18px solid transparent;
      border-left: 18px solid #477fff;
    }
    span {
      background: #ffffff;
      color: #477fff;
    }
  }
  .activeTwo {
    background: #477fff;
    color: #ffffff;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0px;
      width: 0;
      height: 0;
      border-top: 18px solid transparent;
      border-bottom: 18px solid transparent;
      border-left: 18px solid #f2f3f5;
    }
    span {
      background: #ffffff;
      color: #477fff;
    }
  }
  .next {
    background: rgba(71, 127, 255, 0.1);
    color: #477fff;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: -18px;
      width: 0;
      height: 0;
      border-top: 18px solid transparent;
      border-bottom: 18px solid transparent;
      border-left: 18px solid rgba(71, 127, 255, 0.1);
      z-index: 10;
    }
    span {
      background: #477fff;
    }
  }
}

参考：下一步步骤条-CSDN博客