微信小程序界面设计小程序中的WXSS(css)选择器课程-::before伪元素
小程序中的WXSS(css)选择器课程-::before伪元素
微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua
定义和用法
:before 选择器在被选元素的内容前面插入内容。
请使用 content 属性来指定要插入的内容。
浏览器支持
所有主流浏览器都支持 :before 选择器。
注释:对于 IE8 及更早版本中的 :before,必须声明 <!DOCTYPE>。
实例
在每个
元素的内容之前插入新内容:
<!DOCTYPE html>
<html>
<head>
<style>
p:before
{
content:"台词:";
}
</style>
</head><body><p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p><p><b>注释:</b>对于在 IE8 中工作的 :before,必须声明 DOCTYPE。</p></body>
</html>
效果图
防采集标记:黄菊华老师的课程和资料
小程序应用
Wxml代码
<view><text class='c01'>文本文字</text>
</view><view><text class='c02'>文本文字</text>
</view>
Wxss代码
.c01::before{content: "2019-";color: green;
}/*wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签*/
.c02::before{content:url(http://www.4317.org/upFiles/images/2018102743773585.png);
}
效果图
欢迎大家学习我的视频课程:微信小程序界面设计-小程序中的WXSS(css)选择器课程
微信小程序界面设计小程序中的WXSS(css)选择器课程-::before伪元素相关推荐
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:focus 伪类
小程序中的WXSS(css)选择器课程-伪类-:focus 伪类 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/hua ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:checked 伪类(不支持)
小程序中的WXSS(css)选择器课程-伪类-:checked 伪类(不支持) 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/to ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:nth-child() 伪类
小程序中的WXSS(css)选择器课程-伪类-:nth-child() 伪类 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/top ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:nth-last-child伪类
小程序中的WXSS(css)选择器课程-伪类-:nth-last-child伪类 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/t ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-子元素选择器
小程序中的WXSS(css)选择器课程-子元素选择器 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhu ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:first-child 伪类
小程序中的WXSS(css)选择器课程-伪类-:first-child 伪类 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/top ...
- 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:last-child 伪类
小程序中的WXSS(css)选择器课程-伪类-:last-child 伪类 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topi ...
- 微信小程序界面设计小程序中CSS3样式精通课程-渐变Gradients-线性渐变Linear Gradients
线性渐变Linear Gradients 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 通用语法 ...
- 微信小程序界面设计小程序中CSS3样式精通课程-渐变Gradients-使用透明度(transparent)
渐变Gradients-使用透明度(transparent) 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huang ...
最新文章
- Cisco 3640策略路由配置
- 搭建LAMP环境示例
- 用 Hasor 谈一谈MVC设计模式
- Python正则表达式初识(九)
- Elasticsearch查询之term/match解析
- Effective C# Item30:尽可能实现CLS兼容的程序集
- torch中loss.bacword的理解
- 使数据可供ArcGIS Server访问
- C#窗体控件-文本框控件TextBox
- robotframework3.2.1——导入selenium2Library库后没有open browser关键字
- 转换动态磁盘到普通磁盘
- linux系统安装SAI吗,求救~~~把linux安装到C盘了
- Mybatis的联合查询
- pycharm项目里的根目录
- 精讲精练之图像分割经典算法——分水岭算法
- cad计算机绘图基础知识,机械零件制图识图必须懂的七大基础知识
- 使用Python处理excel表格(openpyxl)教程
- ant vue 的datepicker类组件中英文混合显示解决
- 关于async await 等任务队列插话
- 7-19 评委打分 (15 分)
热门文章
- 灰色关联度分析excel步骤_技术 | 基于灰色关联与粗糙依赖度的甘肃兰州市区泥石流危险性评价...
- 免杀老工具backdoor(后门工厂+ Shellter / ico图标+数字签名/替换
- Typora去除波浪线
- 【雷达通信】基于matlab GUI相控阵雷达方向图【含Matlab源码 1048期】
- 《笑着离开惠普》读书笔记之从优秀到卓越
- visual studio2019改了账户登录选项也无法登陆的解决办法
- 计算机桌面都有说明书,360桌面助手功能使用说明
- 游戏开发 入职6个月 牢骚型小结
- 薄膜干涉、增透膜增反膜、劈尖和牛顿环(大学物理笔记)
- idea打开接口实现类的快捷键