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.实现样式

1536a321f82a8642d957301ea171a5e3.png

2.代码

鼠标hover butto


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部