关于伪类伪元素以及：after与：before

最新推荐文章于 2023-01-01 12:43:42 发布

ServerWang

最新推荐文章于 2023-01-01 12:43:42 发布

阅读量1.1k

点赞数 1

分类专栏： CSS探讨

本文链接：https://blog.csdn.net/SuperCoooooder/article/details/50865233

版权

CSS探讨专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在使用bootstrap并结合网页进行调试的时候，经常看见：before与:after这两个东西，而刚开始并没有在意，只是经常使用:hover :focus :visited :link :active这些比较常见的伪类，这些都顾名思义，表示了一个元素的某个状态，直到发现有些艺术的效果竟然是用:after :before来做出来的，随后才真正重视起来。

伪类主要有以下几种：

顾名思义，伪类的作用与class的作用一样，却又并不是class，所以称之为伪类。例如：

    p:hover{
        color:red;
        }
    <p> <span style="color:#FF0000;">hello~</span></p>

当鼠标移到hello~的时候 hello会变为红色。

而我们不使用伪类

    .hover{
             color:red;
            }
     <p class="hover"> <span style="color:#FF0000;">hello!</span></p>

一样可以起到效果。

而伪元素有以下几种：

有人看了会问:first-letter ：first-line不也是表示第一个字母第一行的状态么？我们来看：

在使用伪元素时：

p:first-letter{
            color:red;
            }
<p><span style="color:#FF0000;">I</span> am cooooder  </p>

第一个字母I会变为红色

在不使用伪元素时：

.first-letter{
         color:red;
           }
<p><span class="first-letter">I</span>am cooooder</p>

相当于给<p>内的第一个字母包裹了一个元素，所以称之为伪元素。

：before ：after理解起来很简单，就是在元素之前和之后添加一个元素，默认是行内元素，所以我们可以把它当作一个<span>标签来处理，它同样可以使用CSS来定义它的样式，当然，在需要设置宽高的时候需要设置display:block。接下来我们就实际看一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素试验</title>
    <style>
        span:before{
            content: "我是:before";
            color: red;
        }
        span:after{
            content: "我是:after";
            color: blue;
        }
    </style>
</head>
<body>
<span>我是主体</span>
</body>
</html>

运行结果：

从运行结果的页面信息来看，after与before是在<span>内部内容的前后插入了伪元素，由于没有实体，所以他的内容需要使用content属性来设置。不过before与after只支持Ie8以上。

ServerWang

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于伪类伪元素以及：after与：before

在使用bootstrap并结合网页进行调试的时候，经常看见：before与:after这两个东西，而刚开始并没有在意，只是经常使用:hover :focus :visited :link :active这些比较常见的伪类，这些都顾名思义，表示了一个元素的某个状态，直到发现有些艺术的效果竟然是用:after :before来做出来的，随后才真正重视起来。伪类主要有以下几种：
复制链接

扫一扫