前言
层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”。“伪元素”不会显示在文档流中,一般我们用firefoxbug也是查看大、不到的,但却可以为我们实现一些很有用的样式或者功能。
最常用的伪元素
分别有 a:link{} /**未访问时的状态**/
a:visited /**已访问过的状态**/
a:hover /**鼠标移到链接上时的状态**/
a:active /**鼠标按下去的状态**/
: before /**在一个元素的内容之前添加内容**/
:after /**在一个元素的内容之后添加内容**/
下面主要说一下a:hover 和:before 和:after
(1)a:hover
a:hover{
position: relative;
display: inline-block;
outline: none;
text-decoration: none; color: #000; font-size: 32px;
}
(2):before
div.test:before{
content: "↗"; /**使用引号包括一段字符串,将会向元素内容中添加字符串**/
content:"(" attr(href) ")"; 、/**调用当前元素的属性,可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来**/
content:url('my.jpg');
}
(3):after
div.test:after{
content: "↗"; /**使用引号包括一段字符串,将会向元素内容中添加字符串**/
content:"(" attr(href) ")"; 、/**调用当前元素的属性,可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来**/
content:url('my.jpg');
}
集合以上三个做一个简单的例子
除了简单的添加字符,配合 CSS 强大的定位和特效特性,完全可以达到给简单的元素另外附加最多两个容器的效果。有一点需要注意的是,如果不需要内容仅配合样式属性做出效果,内容属性也不能为空,即 content:”" 。否则,其他的样式属性一概不会生效。
这种很炫的效果就可以很简单的实现了
a {
position: relative;
display: inline-block;
outline: none;
text-decoration: none;
color: #000;
font-size: 32px;
padding: 5px 10px;
}
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right: -20px; }
(1)a:hover
a:hover{
position: relative;
display: inline-block;
outline: none;
text-decoration: none; color: #000; font-size: 32px;
}
(2):before
div.test:before{
content: "↗"; /**使用引号包括一段字符串,将会向元素内容中添加字符串**/
content:"(" attr(href) ")"; 、/**调用当前元素的属性,可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来**/
content:url('my.jpg');
}
(3):after
div.test:after{
content: "↗"; /**使用引号包括一段字符串,将会向元素内容中添加字符串**/
content:"(" attr(href) ")"; 、/**调用当前元素的属性,可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来**/
content:url('my.jpg');
}
集合以上三个做一个简单的例子
除了简单的添加字符,配合 CSS 强大的定位和特效特性,完全可以达到给简单的元素另外附加最多两个容器的效果。有一点需要注意的是,如果不需要内容仅配合样式属性做出效果,内容属性也不能为空,即 content:”" 。否则,其他的样式属性一概不会生效。
这种很炫的效果就可以很简单的实现了
a {
position: relative;
display: inline-block;
outline: none;
text-decoration: none;
color: #000;
font-size: 32px;
padding: 5px 10px;
}
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right: -20px; }