after和before选择器的使用方法

发布时间:2020-09-26 13:53:07 作者:小新
来源:亿速云 阅读:127

这篇文章主要介绍after和before选择器的使用方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

在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>

如图所示:

after和before选择器的使用方法

分析:

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

after和before选择器的使用方法

以上是after和before选择器的使用方法的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. CSS中伪元素before和after的使用方法
  2. css伪元素::before和::after的使用方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

after before选择器 fo

上一篇:域名转移需要多长时间

下一篇:top域名怎么注册

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》