html列名变色,html tip实现

一、介绍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