关于伪类元素:before和:after

实现气泡效果

首先定义一个

<p class="speech"></p>

 

先给外层的容器添加样式：

复制代码
p.speech
{
position: relative;
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: #fff;
border: 8px solid #666;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}
复制代码

 

没有什么特别复杂的，主要的核心就在postion:relative，用来定位对话浮层的。我们还需要一些Mozilla和webkit的属性来完成圆角和阴影，IE8以下的浏览器看不到这些属性，只是显示一个框，不影响总体的效果。

我们现在需要创建对话浮层下面的那个三角形的指向标志了。不使用图片，我们使用CSS边框来完成这个效果。看看下面这个用不同颜色边框完成的效果。

我们把高度和宽度减少到0px，然后给边框使用不同的大小，看看效果：

为了最后能做成指示标志的样子，我们把上边距和左边距设置为solid，下边距和右边距设置为透明：

但是我们把这个放哪呢？还好，我们可以使用CSS的伪类:before和:after来生成，所以：

复制代码
p.speech:before
{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 30px;
top: 100px;
border: 25px solid;
border-color: #666 transparent transparent #666;
}
复制代码

 

现在三角形的标识就定位在我们的气泡下面了。另外，不要费事去考虑这个元素的阴影，他会定位在透明边界的旁边，而不是看到的图形的旁边。

我们还需要移除三角形的一部分。我们可以在里面放置一个白色的小三角形来达到这个效果。

复制代码
p.speech:after
{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 38px;
top: 100px;
border: 15px solid;
border-color: #fff transparent transparent #fff;
}
复制代码

 

我们的不使用图片的对话气泡就完成了：

 

另外，我们还可以使用:before和:after伪类来做很多其他的事情，比如，一个思考气泡也可以通过这样办法完成：

首先也是建一个





<p class="thought">I think...</p>






css代码：




复制代码


p.thought{
position: relative;
width: 130px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: #fff;
border: 8px solid #666;
-webkit-border-radius: 58px;
-moz-border-radius: 58px;
border-radius: 58px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}


p.thought:before, p.thought:after{
content: '';
position: absolute;
left: 10px;
top: 70px;
width: 40px;
height: 40px;
background-color: #fff;
border: 8px solid #666;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
z-index:5;
}

p.thought:after{
position: absolute;
width: 20px;
height: 20px;
left: 5px;
top: 100px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
z-index:6;
}


复制代码




最新实现效果：




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


 


一、伪元素基本用法


 


     在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";
}




 


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


二、伪元素属性和样式


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的打印样式表。


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等属性规则为影响目标元素的规则。


三、伪元素的兼容性


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


支持: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上并不支持，如果不是很在意他们的用户数量的话，基本可以很自由的使用啦。


四、伪元素的作用


     这里借用Thoriq Firdaus的几个例子简单说一下伪元素的用法。另外伪元素既然是伪元素，那么作为结构与表现分离的一种实现，其作用应该是对文本起到很好的修饰作用，而不是把它用来表现文本。


阴影效果


使用 伪元素:before 和 :after 。它们两个都是绝对定位，而且使用负z-index来放置到图片后方实现阴影效果。


fascinating-shadows8


3D按钮


利用伪元素结合CSS3 box-shadow 来绘制一个令人吃惊的3D按钮，仅仅使用了CSS和单一的锚文本。伪元素:before 被用来在按钮的左侧添加数字“1”。


3d-button9


叠加图像效果


使用伪元素来仅仅依靠一个图片标签创建一个“凌乱的”叠加图像效果也是可能的。伪元素用于建立一个图片叠加的错觉，通过使用z-index负值使“叠加”的图片在真正的图片后面来实现。


stacked-image10






            

            
posted @ 
2015-10-10 15:14 
skden 
阅读(958) 
评论(0) 
编辑 
收藏 
举报