【伪类与伪元素】用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;}}