• :在线测试工具暂时不可用,小伙伴们可以使用本地编辑器来代替,绿叶全新版本正在快马加鞭开发中,比心~

4.7 ::before和::after选择器

一、::before和::after选择器

在CSS3中,我们可以使用::before和::after这两个选择器在元素前面或后面添加内容。这两个选择器常和"content属性"配合使用,使用的场景最多的就是清除浮动和创建小图标。

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3 ::before和::after选择器</title>
    <style type="text/css">
        div::before
        {
            content:"绿叶学习网";
        }
    </style>
</head>
<body>
    <div>CSS3教程</div>
</body>
</html>

在浏览器预览效果如下:

分析:

::before和::after这两个选择器都是配合content属性在元素之前或之后插入内容、图片、多媒体等。这2个选择器非常有用,甚至可以用来设计各种小图标:

上面小图标就是用::before和::after这两个选择器实现的,纯CSS喔,感觉很牛逼吧!有机会我们再在CSS3进阶教程给大家详细讲解一下。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取学习资源以及配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:519225291(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部