微信小程序界面设计小程序中的WXSS(css)选择器课程-::before伪元素

悠悠 2024-02-19 16:29 49阅读 0赞

### 小程序中的WXSS(css)选择器课程-::before伪元素 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]  
定义和用法  
:before 选择器在被选元素的内容前面插入内容。  
请使用 content 属性来指定要插入的内容。  
浏览器支持

![在这里插入图片描述][20190123113327989.png]  
所有主流浏览器都支持 :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>

效果图  
![在这里插入图片描述][20190123113355475.png]  
[防采集标记：黄菊华老师的课程和资料][Link 1]

### 小程序应用 ###

> Wxml代码

> Wxss代码

.c01::before{
      content: "2019-";
      color: green;
    }
    
    /*wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用<image/>标签*/
    .c02::before{
      content:url(http://www.4317.org/upFiles/images/2018102743773585.png);
    }

效果图  
![在这里插入图片描述][20190123113441493.png]

[欢迎大家学习我的视频课程：微信小程序界面设计-小程序中的WXSS(css)选择器课程][-_WXSS_css]  
![微信小程序界面设计小程序中的WXSS(css)选择器课程-::before伪元素][WXSS_css_-_before]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[20190123113327989.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6f6204b177f3430ca94225b724f80b2c.png
[20190123113355475.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c1d569ccb8184c21aaa86957f824662a.png
[Link 1]: http://www.4317.org/ke/
[20190123113441493.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/de1b0405c6b844fdaf5f3fbd4d6ecca0.png
[-_WXSS_css]: https://ke.qq.com/course/371755?tuin=2b10d56
[WXSS_css_-_before]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/483e02672594494e99f88ec018fcb31e.png