CSS before和after伪元素

CSS3的功能非常强大,配合现代浏览器可以做出赏心悦目的效果,这几天逛网站,参考了一些效果,顺手做了一个。Firefox浏览器可以看到最佳效果,原因下面会讲到,以下是效果预览:

     CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,它们是以CSS选择器的形式出现的,具有标签的表现效果,但是呢又不是真正的标签元素,所以叫做“伪元素”。下面就说一下常见的两个伪元素before和after。

  • 威尼斯人棋牌 1
  • 威尼斯人棋牌 2
  • 威尼斯人棋牌 3
  • 威尼斯人棋牌 4
  • 威尼斯人棋牌 5
  • 威尼斯人棋牌 6
  • 威尼斯人棋牌 7
  • 威尼斯人棋牌 8

 

 

一、伪元素基本用法

 

     在CSS选择器中加上相应伪类选择符就可以了,像这样:#example: before或者#example: after,这里是使用ID选择器,比如下面的CSS代码:

#example:before {
  content: """;
}
#example:after {
  content: """;
}

 

它的效果就是为example标签前后加上双引号。

      和伪类的选择符很像,但是有一点小区别,就是伪类选择符实际上是用两个冒号,::before的形式,以和伪类区别开,但是只用一个冒号浏览器也是可以识别的,在CSS3中规定是一个冒号就可以了。

      如果没有绑定标签,像这样::before{ content:”=”;} 这样的伪元素是没有意义的,代码会在DOM里的每个元素的内容之前插入散列符号。即使你删除了<body>标签和它的所有内容,你仍会在页面上看见两个散列符号:一个在<html>里,另一个在<body>标签里。

      那么可不可以给伪元素再添加伪元素呢?比如下面这个代码:

#example:after:after{
    content: "after";
}

 

      在浏览器中刷新,测试一下会发现什么也没有显示,也就是说再给伪元素添加伪元素目前很多浏览器上是无效的,浏览器忽略掉该定义,只能识别一层伪元素,但是既然可以伪元素添加伪元素,可以期待再为伪元素添加伪元素,其表现力是很强的。

首先写好页面基本的html代码,图片都是网上找的:

二、伪元素属性和样式

 1 <ul>   2         <li>   3             <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/f2fcb01.jpg" alt="威尼斯人棋牌 9"></a>   4         </li>   5         <li>   6             <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/b8def93.jpg" alt="威尼斯人棋牌 10"></a>   7         </li>   8         <li>   9             <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/f2fcb02.jpg" alt="威尼斯人棋牌 11"></a>  10         </li>  11         <li>  12             <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/e16ac0.jpg" alt="威尼斯人棋牌 12"></a>  13         </li>  14         <li>  15             <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/261f104.jpg" alt="威尼斯人棋牌 13"></a>  16         </li>  17         <li>  18             <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/261f102.jpg" alt="威尼斯人棋牌 14"></a>  19         </li>  20         <li>  21             <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/32e0012.jpg" alt="威尼斯人棋牌 15"></a>  22         </li>  23         <li>  24             <a href="#"><img src="http://down.139zhuti.com/bizhi/2010/8/24/32e0011.jpg" alt="威尼斯人棋牌 16"></a>  25         </li>  26     </ul>

1.content属性

      每个伪元素必须要有content属性,否则的话浏览器不能识别,你可以为content属性添加空引用作为它的值(即:content:“”)。

      你也可以为content包含一个指向一个图像的URL,就像在css里包含一个背景图像一样:

p:before {

  content: url(image.jpg);
}

 

威尼斯人棋牌,      也可以包含一个Data URI代替图像引用,就像使用css背景一样。

      你还可以选择ATRR(X)中的函数的形式。“把X属性的值以字符串的形式返回”,比如:

a:after {
  content: attr(href);
}

 

      attr()函数的功能是把得到特定属性的值并把它作为插入的文本成为一个伪元素。

      上面的代码会导致页面上的每一个<a>元素的href值立即被放置在每个各自的<a>元素的后面。在文档被打印时,它可以用作一个包含所有URl的打印样式表。

是一个基本的ul、li布局,效果的实现重点是下面的css代码:

2.标签属性

      伪元素也是元素,所以你可以为它添加大部分其他元素具有的属性,比如定位属性,字体属性,背景属性和盒模型的属性等,另外由于伪元素默认是内联元素,所以如果要使得盒模型中的height等属性有效的话,必须要把它转化为块元素,具体就是设置其display属性为block,或者设置为float等。如下:

#example:after{
    position: absolute;
    display: block;
    left: 20px;
    top: 20px;
    content: """;
    width: 20px;
    height: 20px;
    background: #6F3;
}

      既然伪元素可以定义position等属性,那么before和after的约束就很有限了,before和after的区别只能是在没有特殊定义伪元素的位置等信息的时候的默认行为不一致,before出现在相对绑定的元素之前,而after出现在相对绑定的元素位置之后。

      另外既然可以为伪元素定义盒子模型的属性,就不得不说,伪元素默认为其目标元素的子元素,比如#example:after,伪元素after的父元素就是#example选择符对应的元素,它具有一般子元素盒模型的特性,即为他定义的height和width等属性规则为影响目标元素的规则。

  1 body{    2     background-color:#ddd;    3     margin:0    4 }    5 .wrapper{    6     margin:100px auto;    7     width:960px    8 }    9 ul{   10     margin:0;   11     list-style:none;   12     padding:0   13 }   14 img{   15     border:0;   16     vertical-align:bottom   17 }   18 ul li{   19     float:left;   20     margin:5%;   21     position:relative;   22     width:140px;   23     z-index:10   24 }   25 ul li img{   26     position:relative;   27     z-index:10   28 }   29 ul li img{   30     -moz-box-sizing:border-box;   31     -webkit-box-sizing:border-box;   32     box-sizing:border-box;   33     border:10px solid #fff;   34     border-radius:3px;   35     box-shadow:0 1px 5px rgba(0,0,0,.5)   36 }   37 ul li:before,ul li:after{   38     -moz-box-sizing:border-box;   39     -moz-transition:all .3s ease-out 0s;   40     -webkit-box-sizing:border-box;   41     -webkit-transition:all .3s ease-out 0s;   42     -o-transtion:all .8s ease-out 0s;   43     box-sizing:border-box;   44     border:10px solid #fff;   45     border-radius:3px;   46     box-shadow:0 1px 5px rgba(0,0,0,0.5);   47     content:"";   48     height:100%;   49     left:0;   50     position:absolute;   51     width:100%   52 }   53 ul li:before{   54     -moz-transform:rotate(2deg);   55     -moz-transform-origin:left bottom;   56     -webkit-transform:rotate(2deg);   57     -webkit-transform-origin:left bottom;   58     -o-transform:rotate(2deg);   59     -o-transform-origin:left bottom;   60     top:4px;   61     z-index:-5   62 }   63 ul li:after{   64     -moz-transform:rotate(4deg);   65     -moz-transform-origin:left bottom;   66     -webkit-transform:rotate(4deg);   67     -webkit-transform-origin:left bottom;   68     -o-transform:rotate(4deg);   69     -o-transform-origin:left bottom;   70     top:8px;   71     z-index:-10   72 }   73 ul li:hover:before,ul li:hover:after{   74     -moz-transform:rotate(0deg);   75     -webkit-transform:rotate(0deg);   76     -o-transform:rotate(0deg)   77 }   78 ul li:nth-child(even):before,ul li:nth-child(even):after{   79     top:0;   80     -moz-transform:rotate(0deg);   81     -webkit-transform:rotate(0deg);   82     -o-transform:rotate(0deg)   83 }   84 ul li:nth-child(even):hover:before{   85     top:4px;   86     -moz-transform:rotate(2deg);   87     -webkit-transform:rotate(2deg);   88     -o-transform:rotate(2deg)   89 }   90 ul li:nth-child(even):hover:after{   91     top:8px;   92     -moz-transform:rotate(4deg);   93     -webkit-transform:rotate(4deg);   94     -o-transform:rotate(4deg)   95 }   96 ul li:first-child:before{   97     top:4px;   98     -moz-transform:rotate(-4deg);   99     -webkit-transform:rotate(-4deg);  100     -o-transform:rotate(-4deg)  101 }  102 ul li:first-child:after{  103     top:8px;  104     -moz-transform:rotate(-8deg);  105     -webkit-transform:rotate(-8deg);  106     -o-transform:rotate(-8deg)  107 }  108 ul li:first-child:hover:before,ul li:first-child:hover:after{  109     top:0;  110     -moz-transform:rotate(0);  111     -webkit-transform:rotate(0);  112     -o-transform:rotate(0)  113 }

三、伪元素的兼容性

基本可以放心的使用伪元素,因为它有很好的兼容性,可以不用加浏览器前缀而很好的使用它。

支持:before 和 :after 伪元素的浏览器有:

  • Chrome 2 ,
  • Firefox 3.5 (3.0 had partial support),
  • Safari 1.3 ,
  • Opera 9.2 ,
  • IE8 (with some minor bugs),
  • 几乎所有的移动浏览器。

      但是IE6和IE7上并不支持,如果不是很在意他们的用户数量的话,基本可以很自由的使用啦。

本文由威尼斯人棋牌发布于计算机教程,转载请注明出处:CSS before和after伪元素