after和before选择器怎么用？after和before选择器详解

PHP中文网 JavaScript

本文摘自PHP中文网，作者云罗郡主，侵删。

本篇文章给大家带来的内容是关于after和before选择器怎么用？after和before选择器详解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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

代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>CSS3 ::before和::after选择器</title>

    <style type="text/css">

        div::before

        {

            content:"php中文网";

        }

    </style>

</head>

<body>

    <div>CSS3教程</div>

</body>

</html>

如图所示：

微信截图_20181121172126.png

分析：

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

4-7-2.png

以上就是对after和before选择器怎么用？after和before选择器详解的全部介绍，如果您想了解更多有关CSS3教程，请关注PHP中文网。

以上就是after和before选择器怎么用？after和before选择器详解的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

jquery的after方法怎么用

如何清除浮动？html中:after伪元素清除浮动的方法实现 （代码）

before :after怎么输出一个小三角形

after和before选择器怎么用？after和before选择器详解

更多相关阅读请进入《after》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...