【伪类与伪元素】用CSS伪元素（以:before为例）插入图片
喵喵酱仔__ 2024-10-23 11:33:01 阅读 77
【伪类与伪元素】用CSS伪元素（以:before为例）插入图片
对于一些小图标类型的图片，若使用<img>略微有些麻烦，iconfont是一个不错的选择用起来也相当灵活，但是所需要步骤较为繁琐，今天介绍一种使用css伪元素快速插入图标的小技巧。
效果图
伪类 与 伪元素
伪类
在网上很多篇博客中并未将这两个解释清楚，很多博客直接写到利用css伪类插入图片，这种说法严格来讲是错误的。
CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态[1]。
通俗来说就是： 我们要在某个元素处于某种状态时为其添加某个样式，但是仅仅通过dom树又无法表示这种状态，此时可以通过伪类对其添加样式。比如当鼠标滑动过某个文字时将其变为红色，可使用伪类来实现：
<code><body>
<h1 class="title">伪类</h1>code>
<style type="text/css">code>
.title:hover{
color: red;
}
</style>
</body>
伪元素
伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式[2]
通俗来说：我们可以使用伪元素创建在dom树中并不存在（在HTML文档中未定义这个元素，）的元素。话不多说上示例代码：
<body>
<!-- 在HTML文档中只定义了一个元素 -->
<h1 class="title">HTML中定义的元素</h1>code>
<style type="text/css">code>
.title:hover{
color: red;
}
/* 通过伪类增加一个元素 */
.title::before{
content: "伪类定义的元素";
font-size: 12px;
color: blue;
}
</style>
</body>
案例说明
弄清楚伪类与伪元素的区别之后，那我们就用伪元素来添加小图标。
再看一眼效果图，我们要在 “5月14日” 前加上一个日历的小图标。
<code><view class="date-text"><text>5月14日</text></view>code>
<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
添加一个三角形
<code><div class="jsc-phone-header">code>
<div class="header_item" :class="{ active: !isNext, next: isNext }">code>
<span>1</span>
验证身份
</div>
<div class="header_item" :class="{ activeTwo: isNext }">code>
<span>2</span>
绑定手机号码
</div>
</div>
<div class="dialog-footer" style="border-top: 1px solid #dcdee0">code>
<el-button @click="closePhoneDialog">取消</el-button>code>
<el-button type="primary" @click="saveOrNext(phoneFormRef)">code>
{ { 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博客
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。