CSS3伪元素Before和After应用介绍

最新推荐文章于 2019-06-08 23:13:57 发布

hfit000

最新推荐文章于 2019-06-08 23:13:57 发布

阅读量1.2k

点赞数

伪元素在CSS2.1的规范中就已经定义清楚了，到CSS3后，before和after因其特殊的用途，在结合强大的CSS3新特性一起使用时，开始大放异彩，关键是可以利用它们实现很多之前需要JS支持的效果。如果英文不错，CSS2.1规范中伪类和伪元素的内容可以参考原文：http://www.w3.org/TR/2009/CR-CSS2-20090908/generate.html#before-after-content

基础知识

在CSS2.1中样式通常依附与一个元素在文档树中的位置，这个简单的模型对于许多情况来说是足够的，但是一些常见的版式状态不能应用于文档树的结构。例如，在HTML中，没有元素能够引用一个段落的第一行，所以也没有简单的CSS选择符应用它。

所以，CSS引进了伪类(pseudo-class)和伪元素(pseudo-element)来允许基于文档树意外信息的格式化。

伪类：伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容；原则上特征是不可以从文档树上推断得到的。在感觉上伪类可以是动态的，当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。例外的是":first-child"能通过文档树推断出来，":lang"在一些情况下也在从文档树中推断出来。

伪类有：:first-child ，:link:，vistited，:hover:，active:focus，:lang
伪元素：伪元素是创造关于文档语言能够指定的文档树之外的抽象。例如文档语言不能提供访问元素内容第一字或者第一行的机制。伪元素允许设计师引用它们，否则这是难以办到的。伪元素还提供样式设计师给在源文档中不存在的内容分配样式（例如：:before和:after能够访问产生的内容）。

伪元素有：:first-line，:first-letter，:before，:after

类，伪类，伪元素之间的关系可以总结为：

1）类选择器可以看着属性选择器在HTML应用中的一种快捷方式，从逻辑和功能上理解有传统类的含义，其被HTML元素预定义的属性class引用，所以叫着类选择器。
2）伪类可以独立于文档的元素来分配样式，且可以分配给任何元素，逻辑上和功能上类类似，但是其是预定义的、不存在于文档树中且表达方式也不同，所以叫伪类。
3）伪元素所控制的内容和一个元素控制的内容一样，但是伪元素不存在于文档树中，不是真正的元素，所以叫伪元素。

记住哦，伪类和伪元素都不出现在源文件和文档树中，所以称之为 “伪”

案例应用

::before -- CSS ::before 伪元素，定义在一个元素的内容之前插入content属性定义的内容与样式

::after-- CSS ::after 伪元素，定义在一个元素的内容之后插入content属性定义的内容与样式

例子1

HTML代码如下：<h1>伪类用法例子 mxria </h1>

CSS代码：

 
        h 
        1: 
        before { 
       
        display 
        :  
        block 
        ; 
       
        width 
        : 
        100px 
        ; 
       
        height 
        : 
        100px 
        ; 
       
        background-color 
        : 
        #0066CC 
        ; 
       
        text-align 
        :  
        center 
        ; 
       
        white-space 
        :  
        pre 
        ; 
       
        content 
        :  
        "" 
        ; 
       
        } 
       
        h 
        1: 
        after { 
       
        display 
        :  
        block 
        ; 
       
        width 
        : 
        150px 
        ; 
       
        height 
        : 
        100px 
        ; 
       
        color 
        : 
        #FF33CC 
        ; 
       
        font-size 
        : 
        13px 
        ; 
       
        background-color 
        : 
        #6600FF 
        ; 
       
        text-align 
        :  
        center 
        ; 
       
        white-space 
        :  
        pre 
        ; 
       
        content 
        :  
        "after伪元素" 
        ; 
       
        }

再看一个例子：

伪元素设置div

代码如下：

<div class="pseudo">伪元素是一个值得大家发挥创意想象力的应用点</div><div class="pseudo">伪元素before/after可以实现各种创意效果</div>

 
        .pseudo:before{ 
       
        width 
        : 
        225px 
        ; 
       
        height 
        : 
        15px 
        ; 
       
        display 
        : 
        block 
        ; 
        float 
        : 
        left 
        ; 
       
        border 
        : 
        1px 
        solid 
        #FF3300 
        ; 
       
        border-radius: 
        30% 
        ; 
       
        content 
        : 
        "" 
        ;} 
       
        .pseudo:after{ 
       
        width 
        : 
        225px 
        ; 
       
        height 
        : 
        15px 
        ; 
       
        display 
        : 
        block 
        ; 
       
        float 
        : 
        right 
        ; 
       
        border 
        : 
        1px 
        solid 
        #FF3300 
        ; 
       
        border-radius: 
        50% 
        ; 
       
        content 
        : 
        "" 
        ;} 
       
        div { 
        width 
        : 
        400px 
        ;}