一、介绍before/after
CSS中的before和after伪类选择器早在CSS2时就被引入,改属性被所有主流浏览器所支持了。
before和after顾名思义,分别指的是伪元素在元素前/后添加内容,默认他们是display是inline,但是可以使用CSS设置为block。
应用before/和after也比较简单,举个例子:
a:after {
content: " after ";
display: block;
coloe: red;
}
可以在浏览器看到,a标签元素后面多出了一段文字 after。(在CSS3中伪类元素使用是如a::after的,不过目前两者并无多大区别)。
(伪元素不可通过DOM使用,IE6/7对该属性不支持)
after和before伪元素有许多用处,还可以简化代码,比如可以写一个计数器、tip小三角形、清除浮动……特别在CSS3中新加的一些属性更是丰富了它的应用,这里有个小教程,用before/after伪元素来实现一个纯CSS3的tooltip。
二、tooltip实现教程
这里我们主要是用草after/before伪元素content中的attr属性,先来看看实现后的样子:
1.实现样式
2.代码
鼠标hover button